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

Question

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

Answer 1

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

然而,谷歌文档要注意,它不使用CONTENTEDITABLE.相反,他们在JavaScript中实现了自己的渲染引擎.除非你按照谷歌文档的规模计划一个项目(即你至少有3个人愿意在渲染引擎上全职工作),contentEditable就是你要走的路.

Answer 2

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

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

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

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

Answer 3

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

如果你只是想做一些比结构化文档简单的事情,那么mobwrite,etherpad或者它的一个分叉就可以适合.

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

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

这可以通过Google云端硬盘的实时API完成.

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

可以通过在源缓冲区上使用指针来处理游标,例如索引引用.

服务器可以以多种方式实现,但是需要支持公共结构的操作转换模型.Wave协议的站点有一个使用xml模型的例子.

Answer 4

Ritzy是一个新的开源富文本编辑器,它包含一个自定义的javascript表面和布局引擎,就像Google Docs一样.看看它的一些想法的来源.

它基于Facebook React和SwarmJS,主要用于嵌入到应用程序中,以支持通过实时协作进行富文本输入.

据我所知,这是该技术的第一个开源实现.请注意,这是一个非常新的,并没有看到任何真实的测试/使用,所以有一些已知的错误,也可能有很多未知的错误.

免责声明:我是上述项目的作者.