介绍

近期在弄富文本编辑器相关的内容，其中项目中使用了 Quill Editor（后面简称 Quill）。Quill 自称是一个现代化强大的富文本编辑器，它与其它富文本编辑器（例如 UEditor）不同的地方在于，过去的编辑器操作的数据和展现给用户的视图层是同一份 HTML／DOM，HTML 是树状结构，显然树状结构不如线性结构好处理，而 Quill 内部就是通过使用线性结构的方式使操作富文本编辑器变得简单，而且数据层和视图层是分离的，这让 Quill 对现在很流行的 React、Vue 或者 Angular 都能很好的支持。下面我简单介绍下 Quill 的使用：

简单的上手

简单的例子：

通过上面几行代码，我们就可以在浏览器里面看到一个简单的但又可以满足基本的富文本编辑器。

当然上面只是一个非常简单的文本编辑器，而 Quill 内置支持了很多富文本操作功能，它既提供了 UI 控制也提供了 API 操作。下面是一个完整的 Quill 自带的编辑器功能：

通过上图我们可以看到这些功能其实已经基本满足日常的富文本编辑需求了。

另外 Quill 提供了两套风格的主题以及常用的富文本编辑器模块：
1. 工具栏
2. 快捷键绑定
3. 历史记录
4. 剪贴板
5. 公式
6. 语法高亮

我们可以在初始化的时候对模块进行自定义的配置或者对模块进行扩展操作，具体文档可以查看：
Quill Modules

最后 Quill 也和其它文本编辑器一样提供了操作 api：
https://quilljs.com/docs/api/，通过 api 我们可以实现定制化的需求。

到这里我们还没看出 Quill 和其它富文本编辑器有什么区别，因为这才是刚刚开始，下面我会介绍 Quill 的独特功能。

Delta

前面说到 HTML 是树型结构，树型结构处理起来比较麻烦，而 Quill 通过变通引入了一个 Delta 的概念。
Delta 是用来描述富文本内容的一种简单的 JSON 格式。通过 Delta 我们就算不需要 DOM／HTML 也可以描述文本和格式化内容，甚至还可以描述文本内容变化。
而且 Delta 是线性结构的数据，因此操作更简便。
下面是一个使用 Delta 描述的富文本内容：