介绍

近期在弄富文本编辑器相关的内容，其中项目中使用了 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 描述的富文本内容：

通过上面的描述，我们可以很清晰地知道有这么一段文本 “Gandalf the Grey”，其中 “Gandalf” 是加粗的，还有 “Grey” 的颜色值是 “#ccc”，最后一个 “\n” 就是代表换行，这里需要注意的是，如果换行这里也有 attributes，这在 Quill 里面表示的是当前行的格式，这里表示这段文字是被 h1 标签包裹的。

通过 Delta 来描述富文本内容，我们就可以摆脱使用 HTML 来描述富文本内容的困境，而且 Quill 还为 Delta 提供了非常丰富的 api 操作。
另外 Delta 还可以描述富文本内容变化，还是 “Gandalf the Grey” 这段文本作为例子：

学习 Delta 的概念很重要，因为如果我们需要增加一些定制化的功能，极有可能需要操作 Delta。
详细有关 Delta 的介绍可以参考官网这里
- https://quilljs.com/guides/designing-the-delta-format/
- https://quilljs.com/docs/delta/

blots & Parchment

Quill 里面有个 blots 的概念，想象一下，一段文字是一个段落，属于块状元素，该段落可以包含以下几种基础元素：
- 块状元素 (Block)，例如标题；块状样式，例如行高，缩进，居中等；
- 纯文本内容 (Text)，是个叶子结点；
- 内联元素 (Inline)，例如等；内联样式，例如文字颜色，文字大小等；
- 非文本叶子结点 (Embed)，例如图片，视频；

而 blots 就是由这些类型组合，实际上在 Quill 里面这些分类统称为 Parchment，
Parchment 主要作用就是操作文档模型，我们可以通过其提供的接口进行 DOM 初始化，返回指定格式或者指定标签和作用域等等。Quill 里面的 blots 都是通过继承 Parchment 里面的类来进行扩展。
举个例子，例如我想实现一个添加链接和加粗功能，这个时候就可以用到 Parchment：

上面的代码实现的是，我想点击指定的按钮给富文本应用加粗和添加链接功能。

熟练使用 Parchment 对我们日后如果需要新增 Quill 没有的功能或者个性化的功能非常有用（同时也是必须）。Parchment 这一块如果要深入讲解需要不少篇幅，下一篇文章我会单独讲解 Parchment 的使用。
Parchment 有关的资料：
- https://quilljs.com/guides/cloning-medium-with-parchment/
- https://github.com/quilljs/parchment

总结

Quill 的一个缺点就是文档比较少的，而且都是英文文档。如果我们只是需要基本功能，我们可以不用了解 api，Delta 和 Parchment 的概念，只需要简单引入 js 然后初始化就可以了。但如果设涉及到个性化的功能时，我们就必须了解和熟悉这些概念，而且必须查看 Quill 的源码，好在 Quill 的源码实现还是比较优雅的。
Quill 使用了和其它富文本编辑器不一样的理念来表达和处理富文本，让我们摆脱了 HTML 和 DOM 带来的烦恼，使一切都变得简化.
当然 Quill 也会有坑，毕竟整个富文本编辑就是一个大坑。我目前遇到的几个问题就是：
1. Quill 用到了 MutationObserver，这表示对一些老式的浏览器会不支持。
2. Quill 的 Range 和 Selection 底层用的原生的 api，我们也知道原生的 Selection／Range 本来就比较坑，不然就不会有人自己实现一套 Selection 和 Range 了。
3. 刚刚说的，就是文档太少了，Modules 的配置项和 Parchment 的使用，很难找到深入了解的文章，只能自己去看源码。
总的来说 Quill 还是给我们带来了很多好处，相信未来 Quill 一定会越来越好。