Javascript 谷歌文档如何实现富文本编辑？

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

iframe的

designMode

属性设置为

on

或具有

contenteditable

属性的元素

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

查看GoogleDoc的标记，我看到的只是一堆嵌套的

div

s

---

所以，我很好奇，谷歌确定了什么技术最适合实现富文本编辑？

谷歌文档既不使用

设计模式

也不使用

内容编辑

。它有自己的用Javascript编写的渲染引擎。从他们的：

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

及

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

---

由于谷歌文档是一个专有产品，而且非常复杂，我不确定这个问题是否会有一个好的比特化答案。这篇文章也会有帮助，一个类似的问题——聪明的亚历克答案是通过购买它；）当谷歌想要开发谷歌文档时，他们以书面形式购买并重新命名了它。