富文本Quill简单分析源码

前言

能力有限，源码分析资料有限，分析的不是很到位，还有可能有错，但愿你们能够提出意见和建议

1、 Quills是什么？

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

首先学习源码以前咱们要知道parchment 和delta

2、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

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 都写了什么

1. 建立一个strong 节点

   

2. 插入到Quill中 quill/quill.js(不写下面的代码是不会插入的)

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

3、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用户删除指定格式。