前言

能力有限，源码分析资料有限，分析的不是很到位，还有可能有错，希望大家可以提出意见和建议

一、 Quills是什么？

Quill是一种现代的富文本编辑器，旨在实现兼容性和可扩展性

首先学习源码之前我们要知道parchment 和delta

二、parchment

Parchment是Quill的文档模型。它是一个并行的树结构，并且提供对内容的编辑（如Quill）的功能。一个Parchment树是有Blots组成的，它反映了一个DOM对应的节点。Blots能够提供结构、格式和内容或者只有内容。Attributors能够提供轻量级的格式化信息。比如用户打了一个"你",在parchment树中就会产生一个节点与之对应

2.1 Blot

Blots 是Parchment文档的基本组成部分。提供了几个基本的实现：Block、Inline和Embed。一般来说，你会想扩展其中的一个，而不是从头开始构建。实现之后，需要在使用之前进行注册。

一个最基本的Blots必须使用一个静态的blotName来命名，并且有一个与之相关联的tagName或者className。如果一个Blot是通过标签和类定义的，类是第一优先级，标签被用作备用。Blots还必须有一个范围，来确定他是内联（inline）还是分块（block）。

简单来说：就是DOM节点，通过blotName命名,设置一个tabName

源码：

https://developer.mozilla.org/zh-CN/docs/Web/API/MutationRecord

2.2 Attributors :

Attributors是一种轻量级的格式化方式。它们的DOM对应的是属性。像DOM属性和节点的关系一样，Attributors也属于Blots。调用Inline或者Block Blot的formats()方法将会返回相应的DOM节点的格式（如果有的话）以及DOM节点属性表示的格式（如果有的话）。

简单来说：就是添加样式

源码结构：

1.入口：quill/quill.js

2. parchment扩展注册了一些blots节点： quill/core.js

3. 创建Quill ： quill/core/quill.js (核心)

构造器里创建了DOM的结构，一些class值，属性值。然后实例化了各种类比如： new Emitter，（parchment的实例化是create），new Editor， new Selection ，然后就是options的各种配置：主题、历史、占位符、只读、模块等。

3. 看下formats/blod.js 都写了什么

创建一个strong 节点
插入到Quill中 quill/quill.js(不写下面的代码是不会插入的)

import Bold from './formats/bold';
Quill.register({
  'formats/bold': Bold,
}, true);
export default Quill;

三、delta

Deltas是一种简单而富有表现力的格式，可以用来描述Quill的内容和改变。这种格式本质上是JSON。

Deltas是作为一个独立库实现的，允许在Quill之外使用。它适用于操作转换，可以实时使用像Google Docs一样的应用程序。

注意：不建议手动构建Deltas，可以使用链式方法insert()、delete()和retain()调用来创建新的Deltas。

改变：

在注册Quill的text-chagne事件时，你会获得一个描述Delta改变了什么的参数。除了insert操作，这个Delta可能有delete或者retain操作。

1. delete：

删除操作明确的指出它意味着：删除下一个字符数。（不可逆）

2. retain：

保留操作仅仅意味着保留下一个字符数，而不需要修改。如果指定了attributes，它仍然意味着保留这些字符，但应用由属性对象指定的格式。如果属性值为null用户删除指定格式。