Javascript文字处理器/编辑器（或Google Docs架构） [英] Javascript word processor/editor (or, Google Docs architecture)

问题描述

我认为将自己的文本编辑器推出Google Docs会很有趣，当然纯粹是为了好奇（与重塑轮子无关）。我一直在想，像Docs和Zoho Writer这样的应用程序如何获得高级布局，如在不同页面上分离文本，或者将标题与其内容保持在一起，您知道，这些编辑器像 TinyMCE 或 nicedit 不会这样做。我意识到使用designMode和contenteditable，并且我听说过使用canvas的人，但是有更好的方法吗？像MS或LibreOffice这样的桌面办公套件如何管理它？ 特别是在编辑内容时将内容分割为独立页面

在附注中，任何人都知道新Google Docs的工作原理？它似乎并不使用contenteditable（Zoho使用designMode），也不使用canvas。从我发现的情况来看，它只是一个非常深层次的< div> s。

解决方案

您的'问题'有点宽，但我会尽力帮助您一点：

Google文档正在使用隐藏的 iframe （而不是 display：none ，只是用户无法真正看到它）与内容可编辑的正文 .docs-texteventtarget的iframe ）;当您看到脱字符号闪烁时，这意味着可编辑的主体是专注的，并且您在那里编写的所有内容都会插入到DOM中（在清理特殊的HTML字符之后）。

Google文档我说，使用DOM修改（不是画布或svg）;即使插入符号也有一点点 div 闪烁。

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

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.

解决方案

Your 'question' is a little wide, but I will try to help you out a little bit:

Google Docs is using a hidden iframe (not display: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 div blinking.

TinyMCE uses a similar technique but with an input field (instead of a content-editable body)

这篇关于Javascript文字处理器/编辑器（或Google Docs架构）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！