quill深入浅出

背景分析/技术选型

quill

API驱动设计,自定义内容和格式化,跨平台,易用.

CKEditor

功能强，配置灵活，ui漂亮，兼容性差

TinyMCE

文档好，功能强，bug少，无外部依赖。

UEditor

功能齐全，但是不维护了，依赖jquery，自定义起来较难。

功能分析

常见功能

1. 基本文本编辑功能（加粗，加斜，字体大小，颜色等等）
2. 文本从word复制粘贴过来后保持格式
3. 撤销重做
4. 扩展能力（自定义toolbar，插件（内容的扩展性））
5. 高级功能（公式，表格等等）

结构分析

目录结构

- blots/
    - block.js
    - break.js
    - container.js
    - cursor.js
    - embed.js
    - inline.js
    - scroll.js
    - text.js
- core/
    - editor.js
    - emitter.js
    - instance.js
    - logger.js
    - module.js
    - quill.js
    - selection.js
    - theme.js
- formats/
    - align.js
    - background.js
    - blockquote.js
    - bold.js
    - code.js
    - color.js
    - direction.js
    - font.js
    - formula.js
    - header.js
    - image.js
    - indent.js
    - italic.js
    - link.js
    - list.js
    - script.js
    - size.js
    - strike.js
    - table.js
    - underline.js
    - video.js
- modules/
    - clipboard.js 剪切板（复制粘贴）
    - history.js 撤销重做
    - keyboard.js 功能快捷键，可自定义
    - syntax.js 代码块语法高亮，依赖highlight.js
    - table.js 表格
    - toolbar.js 工具栏（选项可配置，工具栏html可自定义，自定义选项handlers）
    - uploader.js
- themes/
    - base.js
    - bubble.js
    - snow.js
- ui/
    - color-picker.js
    - icon.picker.js
    - icons.js
    - picker.js
    - tooltip.js

比较重要的是 formats/, blots/，core/editor.js, core/quill.js 这些目录和文件。

Quill与parchment的关系

Quill中的blots 【block, break, container, cursor, embed, inline, scroll, text】 和formats中的 【blockquote, bold, code, formula, header, image, italic, link, list, script, strike, table, underline, video】 主要利用parchment对外提供的Blot来作为可供继承的Blot父类

formats中的 【align, background, color, direction, font, indent, size】 使用 parchment对外提供的 【Attributor, ClassAttributor, StyleAttributor】 来控制样式

parchment提供的Registry是用来进行blot和format的注册。

Quill与Delta的关系

delta作为一种描述内容和修改的数据结构，承担用户操作和DOM修改之间语言的作用

编辑器当前的delta 是当前内容的 一种表达方式（数据源）

难点

dom修改后，如何同步到delta?

简易流程： mutations -> delta

ScrollBlot是最顶层的ContainerBlot, 即root Blot, 包裹所有blots, 并且管理编辑器中的内容变化。

ScrollBlot会创建一个 MutationObserver, 用来监控DOM更新。DOM更新时会调用ScrollBlot的update方法。在Quill的scroll blot中重写了update方法，其中对外抛出SCROLL_UPDATE事件和mutations参数。

if (mutations.length > 0) {
  this.emitter.emit(Emitter.events.SCROLL_UPDATE, source, mutations);
}

然后edito会监听SCROLL_UPDATE事件，然后触发editor的update方法，传入mutations参数，然后在editor的update方法中，会依据mutations构建出对应的delta数组，与已有的delta合并，使当前delta保持最新。

// core/quill.js
// 监听dom修改后触发的SCROLL_UPDATE事件
this.emitter.on(Emitter.events.SCROLL_UPDATE, (source, mutations) => {
  const oldRange = this.selection.lastRange;
  const [newRange] = this.selection.getRange();
  const selectionInfo =
    oldRange && newRange ? { oldRange, newRange } : undefined;
  modify.call(
    this,
    // 依据mutations来同步更新editor对应的delta
    () => this.editor.update(null, mutations, selectionInfo),
    source,
  );
});

// core/editor.js
// 更新this.delta为最新
update(change, mutations = [], selectionInfo = undefined) {
    //...some code
    
    return change;
}

delta修改后，如何同步到dom?

简易流程： delta -> blots -> dom

例如这个API； setContents(delta: Delta, source: String = 'api'): Delta

setContents传入delta后，会遍历delta数组, 生成相应的Blot, Attributor， 然后生成DOM结构，然后进行format

简易源码流程：

quill.setContents -> this.editor.applyDelta -> this.scroll.formatAt

业务实践

生态

文档：官方文档，github, 中文文档（有人翻译了，但是翻译的不好，直接看官方的吧）

插件： https://github.com/quilljs/aw...

结合vue： vue-quill-editor

结合react: react-quill

参考资料