Question

我打开了一个谷歌文档，似乎谷歌文档不是一个简单的文本区域....似乎这是一个自定义的东西....是否有任何库做这种事情？

Answer 1

大多数编辑使用contentEditable属性。只需在任何HTML元素上设置它，即可在现代用户代理中进行编辑，复制和粘贴，拼写检查，格式化等。

但是，Google文档明确指出不使用contentEditable。相反，他们在JavaScript中实现了their own rendering engine。除非你按照谷歌文档的规模计划一个项目（即你至少有3个人愿意在渲染引擎上全职工作），否则contentEditable就是你的选择。

Answer 2

新的Google文档与tinyMCE，ckEditor和similars等其他内容完全不同。这篇文章描述了它背后的一些技术：http://news.softpedia.com/news/Google-Details-the-Powerful-Technology-Behind-the-New-Docs-Editor-141804.shtml

引用文章：“为了解决这些问题，新的Google文档编辑器不会使用浏览器来处理可编辑的文本。我们用JavaScript编写了一个全新的编辑界面和布局引擎，“Jeff Doc，产品经理Jeff Harris。

令人惊讶的是，没有任何开源实现，人们也没有意识到这一点。

简短的回答是，他们实现了图形文本编辑器所做的每一个逻辑，简单的javascript（从布局，渲染到其他所有）

Answer 3

Google Wave开创了谷歌文档的大部分内容，尽管模型完全不同。在那里开始研究，因为有很多东西需要学习。

如果您只是想做一些比结构化文档更简单的事情，那么mobwrite，etherpad或其中一个分支就可以适合。

编辑器可能很棘手，主要涉及在javascript中构建整个文字处理器。这方面的一些例子就在附近。

使用任何类型的编辑器，您都有一个行或元素缓冲区，您必须将其镜像到所选的实时api上。

可以使用Google drive's realtime API完成此操作。

必须在两个方向上处理修改事件。本地模型更改传播到实时模型，反之亦然。对本地模型的修改可以在发生时进行渲染。

可以通过在源缓冲区上使用指针来处理游标，例如Index Reference。

服务器可以通过多种方式实现，但需要支持通用结构的操作转换模型。 Wave protocol's site有一个使用xml模型的例子。

Answer 4

如果您使用元素检查器（Chrome上的Tools＆gt; Developer Tools，或Firefox的Firebug扩展），那么您可以看到他们用于实现它的技术。

你如何实现它与任何事情相同 - 将任务分解成足够小的单位，你可以理解每个单位，了解单位如何协同行动以实现系统，然后实施单位并将它们放在一起。

Answer 5

<!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>

如何实现像文本编辑器一样的Google doc？

5 个答案: