我认为像 Google 文档那样推出我自己的文本编辑器会很有趣，当然纯粹是出于好奇（与重新发明轮子无关）。我一直想知道 Docs 和 Zoho Writer 这样的应用程序如何获得高级布局，例如分隔不同页面上的文本，或者将标题与其内容保持在一起，您知道，诸如 TinyMCE 或 nicedit 不行。我知道使用 designMode 和 contenteditable，并且我听说人们使用 canvas，但是有更好的方法吗？ MS 或 LibreOffice 等桌面办公套件如何管理这一点？ 特别是在编辑内容时将内容分割成独立的页面？
顺便说一句，有人知道新的 Google 文档是如何工作的吗？它似乎没有使用 contenteditable（Zoho 使用 designMode），也没有使用画布。根据我的发现，它只是一个非常深的
I thought it would be interesting to roll my own text editor a la Google Docs, purely for curiosity of course (nothing to do with reinventing the wheel). I've been wondering how applications like Docs and Zoho Writer can get advanced layout like separating text on different pages, or keeping headings together with their content, you know, things editors like TinyMCE or nicedit won't do. I am aware of using designMode and contenteditable, and I've heard people using canvas, but is there a better way? How do desktop office suites like MS or LibreOffice manage that? Especially splitting the content into discrete pages while they are being edited?
On a side note, anyone aware of how the new Google Docs works? It doesn't seem to use contenteditable (Zoho uses designMode), nor canvas. From what I found, it's only a very deep hierarchy of <div>s.
发布评论
评论（1）
你的“问题”有点宽泛，但我会尽力帮助你一点：
Google Docs正在使用隐藏的
iframe（不是display:none，只是用户实际上看不到它），其内容可编辑（.docs-texteventtarget-iframe）；当你看到插入符号闪烁时，这意味着可编辑主体已获得焦点，并且你在那里编写的所有内容都会插入到 DOM 中（在清理特殊 HTML 字符之后），就像我所说的，Google Docs 正在使用 DOM 修改（不是 canvas 或 svg）；甚至插入符号也有一点
div闪烁。TinyMCE 使用类似的技术，但具有输入字段（而不是可编辑内容的正文）
Your 'question' is a little wide, but I will try to help you out a little bit:
Google Docs is using a hidden
iframe(notdisplay:none, is just that the user can't actually see it) with a body with content editable (.docs-texteventtarget-iframe); when you see the caret blinking it means that the editable body is focused and everything you write there gets inserted in the DOM (after sanitizing special HTML characters)Google Docs, like I said, is using DOM modification (not canvas or svg); even the caret is a little
divblinking.TinyMCE uses a similar technique but with an input field (instead of a content-editable body)