Javascript文字处理器/编辑器(或Google Docs架构)

Question

我认为将我自己的文本编辑器滚动到Google Docs会很有趣,纯粹是出于好奇心(当然与重新发明轮子无关).我一直想知道像Docs和Zoho Writer这样的应用程序如何能够获得高级布局,例如在不同页面上分隔文本,或者将标题与内容保持在一起,你知道像TinyMCE或nicedit这样的编辑器不会这样做.我知道使用designMode和contenteditable,我听说人们使用canvas,但是有更好的方法吗？像MS或LibreOffice这样的桌面办公套件如何管理？特别是在编辑内容时将内容拆分为不连续的页面？

另外,有人知道新的Google文档是如何工作的吗？它似乎没有使用contenteditable(Zoho使用designMode),也没有使用canvas.从我发现的,它只是一个非常深层次的<div>s.

Answer 1

你的“问题”有点宽泛，但我会尽力帮助你：

Google 文档正在使用隐藏iframe（不是display:none，只是用户实际上看不到它），其正文可编辑内容（.docs-texteventtarget-iframe）；当您看到插入符号闪烁时，这意味着可编辑主体已获得焦点，并且您在那里编写的所有内容都会插入到 DOM 中（在清理特殊 HTML 字符之后）

正如我所说，Google Docs 使用 DOM 修改（不是 canvas 或 svg）；甚至插入符号也有点div闪烁。

TinyMCE 使用类似的技术，但具有输入字段（而不是可编辑内容的正文）