Google文档如何实施富文本编辑？

Question

我刚读完Nicholas Zakas撰写的关于Web开发人员专业JavaScript中浏览器中富文本编辑的部分。它说有两种方法可以实现富文本编辑：

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

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

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

所以，我很好奇，谷歌认为哪种技术最适合实施富文本编辑？

Answer 1

Google文档既不使用designMode也不使用contentEditable。它有自己的用Javascript编写的渲染引擎。来自blog post on it：

  

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

和

  

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