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

Question

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

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

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

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

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

Answer 1

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

为了解决这些问题,新的Google文档编辑器不会使用浏览器来处理可编辑的文本.我们用JavaScript编写了一个全新的编辑界面和布局引擎.

和

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