本文旨在向大家介绍在线文档的核心模块富文本编辑器技术,并介绍业内主流商业文档产品如何进行富文本编辑器技术选型。
富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器。
富文本编辑器通常会做3个分级:L0、L1 和 L2
依赖浏览器特性,主要是使用到了 designMode、ContentEditable、webkit-user-modify、execCommand 等特性。早期的编辑器都采用这种方案,但可定制的空间有限。例如早期的技术产品 WYSIWYG Editor。
<div class="kuaishou" contentediable="true">请输入正文</div> <!-- 富文本输入框 -->
documennt.execCommand('bold'); //操作
复制代码
L1 在 L0 的基础上继续使用浏览器的特性、DOM 的 API 来自主实现 Selection、Range、Element、TextNode 等,具备一定的可扩展性,但也会有很多难以解决的问题。主要商业产品包括石墨文档(Quill),腾讯文档(Etherpad ACE),飞书文档(Etherpad ACE), 语雀文档(slate, lake),印象笔记(PromiseMirror),Confluence WIKI以及SAAS 产品内集成的知识库(Teambition Thoughts、Pingcode 等等);技术产品包括CKEditor、TinyMCE、Draft.js、 Slate、Quil.js 、ACE 等等,通常我们对 L1 编辑器从布局实现方式还区分为【传统模式】和【MVC模式】
DOM 树等于数据,使用 DOM API 直接操作(CKEditor 4、TineMCE、UEditor)
数据和渲染分离,数据模型发生变更后,数据才发生变更(Slate、CKEditor 5、Quil.js)
自定义输入和操作,包括光标、输入法、删除等基础动作,具备绘图布局等能力。主要商业产品包括Google Docs、 Office Word Online、WPS 以及轻雀文档。
补充:Google Docs、WPS 以及 Office Online 之所以体验性能极致,产品体验丰富,也源于投入极大的研发成本。
userInput→ Action → Edit → Operation → Command → Mutation → Model → View(Layout,Redraw)→ DOM
类似 Notion 或者 Notion LIke 产品属于新的块级编辑体验笔记,拥有的页面和块无限层级,Back Link以及Database体验,与传统富文本编辑器在产品体验上有明显差异,本篇文章不着重描述,感兴趣可以先阅读 editorjs.io/
属于 L2 级
独立的文档模型,管理文档 Model 与 View 之间的映射
重新实现渲染布局引擎,代替浏览器默认布局实现
多人协作操作OT,支撑多人同时在线协作编辑
支持编辑器block化的关键能力
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。