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

Javascript word processor/editor (or, Google Docs architecture)

本文关键字：Google Docs 架构 编辑器 文字 文字处理 处理器 Javascript      更新时间：2023-09-26

我觉得把我自己的文本编辑器放在谷歌文档上会很有趣，当然纯粹是出于好奇（与重新发明轮子无关）。我一直在想，像Docs和Zoho Writer这样的应用程序是如何获得高级布局的，比如在不同的页面上分隔文本，或者将标题与其内容放在一起，你知道，TinyMCE或nicedit这样的编辑器不会做到这一点。我知道使用designMode和contenteditable，我也听说有人使用canvas，但有更好的方法吗？像MS或LibreOffice这样的桌面办公套件是如何管理的尤其是在编辑时将内容拆分为离散页面

顺便说一句，有人知道新的谷歌文档是如何工作的吗？它似乎不使用contenteditable（Zoho使用designMode），也不使用canvas。根据我的发现，它只是<div> s的一个非常深层的层次结构。

你的"问题"有点宽泛，但我会尽力帮你一点：

Google Docs使用了一个隐藏的iframe（不是display:none，只是用户实际上看不到它），其正文内容可编辑（.Docs texteventtarget iframe）；当你看到插入符号闪烁时，这意味着可编辑的主体被聚焦，你在那里写的所有东西都被插入到DOM中（在清除特殊的HTML字符后）

正如我所说，谷歌文档正在使用DOM修改（而不是画布或svg）；即使插入符号也是有点CCD_ 4闪烁。

TinyMCE使用了类似的技术，但有一个输入字段（而不是内容可编辑体）

相关文章：