Google 文档如何实现富文本编辑

How does Google Docs implement rich text editing?

本文关键字：实现 文本编辑 文档 何实现 Google      更新时间：2023-09-26

我刚刚读完了Nicholas Zakas在Professional JavaScript for Web Developers中关于浏览器中富文本编辑的部分。它说有两种方法可以实现富文本编辑：

  1. 属性设置为on designMode帧
  2. 或具有contenteditable属性的元素

我从这些信息中得出的结论是，这两种技术都有如此多的跨浏览器不一致之处，以至于这两种技术都不是真正可靠的解决方案。

检查Google Doc的标记，我看到的只是一堆嵌套的div。

那么，我很好奇，谷歌确定哪种技术最适合实现富文本编辑？

Google Docs 既不使用designMode也不使用 contentEditable 。它有自己的用Javascript编写的渲染引擎。从他们的博客文章中：

为了解决这些问题，新的Google文档编辑器没有 使用浏览器处理可编辑的文本。我们写了一个全新的编辑 表面和布局引擎，完全在JavaScript中。

和

到目前为止，编辑器所做的最困难的事情是弄清楚在哪里绘制文本。为此，我们构建了一个新的布局引擎。以下是新引擎工作原理的示例：假设您键入字母"a"。我们注意到您按下了"a"键，并通过在屏幕外绘制单个"a"进行响应。然后，我们测量该"a"的宽度和高度，将这些测量值与光标的x和y位置相结合，并将"a"放置在屏幕上的正确位置。如果您正在处理某个单词，我们会将光标移到单词后面的字符。如果您位于一行的末尾，编辑器会将您的单词移动到下一行，并将任何溢出推送到它后面的行。

相关文章：