Javascript 如何像文本编辑器一样实现 Google 文档？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4358901/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to implement Google doc like text editor?
提问by Tattat
I opened a google doc, it seems that the google doc is not a simple text area .... it seems that this is a customize stuff.... is there any library for doing that kind of things?
我打开了一个谷歌文档，似乎谷歌文档不是一个简单的文本区域......似乎这是一个定制的东西......有没有做那种事情的库？
采纳答案by phihag
Most editors use the contentEditableproperty. Simply setting it on any HTML element enables editing, copy&paste, spell checking, formatting etc. in modern user agents.
大多数编辑器使用该contentEditable属性。只需在任何 HTML 元素上设置它，就可以在现代用户代理中进行编辑、复制和粘贴、拼写检查、格式化等。
However, google docs specifically does notuse contentEditable. Instead, they implemented their own rendering enginein JavaScript. Unless you plan a project on the scale of google docs (i.e. you have at least, say, 3 people willing to work full-time on the rendering engine), contentEditable is the way to go.
然而，Google文档要注意，它不使用CONTENTEDITABLE。相反，他们用 JavaScript实现了自己的渲染引擎。除非你计划一个 google docs 规模的项目（即你至少有 3 个人愿意全职工作在渲染引擎上），否则 contentEditable 是要走的路。
回答by Gabriel Mazetto
new Google Docs is totally different for everything else like tinyMCE, ckEditor and similars. Here is an article describing some of the technologies behind it : http://news.softpedia.com/news/Google-Details-the-Powerful-Technology-Behind-the-New-Docs-Editor-141804.shtml
新的 Google Docs 与 tinyMCE、ckEditor 等其他所有内容完全不同。这是一篇描述其背后的一些技术的文章：http: //news.softpedia.com/news/Google-Details-the-Powerful-Technology-Behind-the-New-Docs-Editor-141804.shtml
quoted from the article: “To get around these problems, the new Google document editor doesn't use the browser to handle editable text. We wrote a brand new editing surface and layout engine, entirely in JavaScript,” Jeff Harris, product manager, Google Docs.
引自文章：“为了解决这些问题，新的 Google 文档编辑器不使用浏览器来处理可编辑文本。我们完全用 JavaScript 编写了一个全新的编辑界面和布局引擎，”Google Docs 产品经理 Jeff Harris。
It's amazing how there isn't any open source implementation and people are not aware of this.
令人惊讶的是，没有任何开源实现而且人们没有意识到这一点。
The short answer is that they implemented every single logic that a graphic text editor would do, in plain javascript (from layout, to rendering, to everything else)
简短的回答是，他们用纯 JavaScript 实现了图形文本编辑器会做的每一个逻辑（从布局到渲染，再到其他一切）
回答by 12345
Google Wavepioneered much of what google docs has, though the models are completely different. Start research there, as there is much to learn.
尽管模型完全不同，但Google Wave开创了 google docs 所拥有的大部分内容。在那里开始研究，因为有很多东西要学。
If you are just trying to do something simpler than structured documents, mobwrite, etherpad or one of its forks could suit.
如果你只是想做一些比结构化文档更简单的事情，mobwrite、etherpad 或其一个分支可能适合。
The editor can be tricky and essentially involves building an entire word processor in javascript. Some examples of this are around.
编辑器可能很棘手，基本上涉及用 javascript 构建整个文字处理器。这方面的一些例子就在身边。
With any kind of editor you have a line or element buffer, which you must mirror onto the realtime api of choice.
对于任何类型的编辑器，您都有一个行或元素缓冲区，您必须将其镜像到所选的实时 api 上。
This can be done with Google drive's realtime API.
这可以通过Google Drive 的实时 API来完成。
Modification events have to be handled in both directions. Local model changes propagating to the realtime model and vice versa. Modifications to the local model can get rendered as they happen.
必须在两个方向上处理修改事件。本地模型更改传播到实时模型，反之亦然。对本地模型的修改可以在发生时呈现。
Cursors can be handled by having pointers on the source buffer, such as Index Reference.
可以通过在源缓冲区上放置指针来处理游标，例如Index Reference。
The server can be implemented in a number of ways, but will require an operational transformation model supporting common structures. Wave protocol's sitehas an example using an xml model.
服务器可以通过多种方式实现，但需要一个支持通用结构的操作转换模型。Wave 协议的站点有一个使用 xml 模型的示例。
回答by Raman
Ritzyis a new open source rich text editor that contains a custom javascript surface and layout engine just like Google Docs. Take a look at it's source for some ideas.
Ritzy是一个新的开源富文本编辑器，它包含一个自定义的 javascript 表面和布局引擎，就像 Google Docs 一样。看看它的一些想法的来源。
It is based on Facebook Reactand SwarmJSand is primarily intended for embedding into applications to support rich text entry with real-time collaboration.
它基于Facebook React和SwarmJS，主要用于嵌入到应用程序中，以支持实时协作的富文本输入。
As far as I know, this is the first open source implementation of this technique. Note that this is pretty new and hasn't seen any real-world testing/usage, so there are some known bugsand likely lots of unknown ones as well.
据我所知，这是该技术的第一个开源实现。请注意，这是非常新的，还没有看到任何真实世界的测试/使用，所以有一些已知的错误，也可能有很多未知的错误。
Disclaimer: I am the author of the above-mentioned project.
免责声明：我是上述项目的作者。
回答by Pete Kirkham
If you use the element inspector (Tools>Developer Tools on chrome, or the Firebug extension for Firefox) then you can see what techniques theyused to implement it.
如果您使用元素检查器（Chrome 上的“工具”>“开发者工具”，或 Firefox 的 Firebug 扩展），那么您可以看到他们使用哪些技术来实现它。
How youimplement it is the same as anything - break up the tasks into small enough units that you can understand each one, understand how the units act in concert to realise the system, then implement the units and put them together.
如何你实现它是一样的东西-分手的任务成足够小的单位，你可以了解每个人，了解各单位在演唱会如何采取行动来实现系统，然后执行的单位和把它们放在一起。
回答by Senthil
<!DOCTYPE html>
<html>
<head>
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script>tinymce.init({ selector:'textarea' });</script>
</head>
<body>
<textarea>Next, get a free TinyMCE Cloud API key!</textarea>
</body>
</html>
