前言

本文是介绍各类在线编辑器所需技术

富文本编辑器

Level0

传统编辑器CKEditor和UEditor，主要依赖于浏览器原生的编辑能力，用户内容的输入是浏览器直接处理，加粗、斜体、回车等这类的处理则是捕获浏览器的事件来覆盖浏览器默认行为来实现，再辅以一些DOM的嵌套规则（dtd）和复杂数据输入（如粘贴）的过滤规则来约束数据的正确性，这类编辑器整体思路还是比较清晰的。
内容的可编辑主要依赖DOM的contentEditable属性，基于原生execCommand或者自定义扩展的execCommand去操作DOM实现富文内容的修改。

ps: 上图是根据个人理解绘制的架构构想图，跟实际可能会有些出入

Quill

Quill对DOM Tree以及数据的修改操作进行了抽象，这意味着编辑器开发者大部分场景下其实不是直接通过修改DOM完成编辑器功能的，而是通过Quill提供的模型操作API来完成操作的，主角变成了：Delta、Parchment & Blots
下面是一段富文本内容描述：

用 Delta 进行描述如下：

Delta只有3种动作和1种属性，却足以描述任何富文本内容和任意内容的变化。
3种动作：

• insert：插入
• retain：保留
• delete：删除

1种属性：
attributes：格式属性
Delta 的一个特点是只描述内容的变化，最终的内容是由一系列的变化组成的。
对应关系：

• Editor Container <====> Parchment
• DOM Node <====> Blot

Slate

Slate是可以称为编辑器框架的，它不提供开箱即用的功能，只提供开发编辑器的基础架构，如果想实现一款编辑器需要基于这套架构实现一系列的编辑功能的插件。

开源编辑器的发展

Google Doc的富文本技术

What’s different about the new Google Docs?

参考

【1】【第2108期】开源富文本编辑器技术的演进
【2】【第2136期】Angular富文本编辑器之路的探索
【3】划线高亮和插入笔记的技术实现
【4】从零实现并扩展可自由绘制的画板
【5】Twitter和微博都在用的 @ 人的功能是如何设计与实现的？
【6】你不知道的 Canvas 表格交互
【7】Slate 中文文档