前言

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

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

源码:

developer.mozilla.org/zh-CN/docs/…

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;
复制代码

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