背景剖析/手艺选型

quill
API驱动设想,自定义内容和花样化,跨平台,易用.

CKEditor
功用强，设置天真，ui美丽，兼容性差

TinyMCE
文档好，功用强，bug少，无外部依靠。

UEditor
功用完全，然则不保护了，依靠jquery，自定义起来较庞杂。

功用剖析

罕见功用

1. 基本文本编辑功用（加粗，加斜，字体大小，色彩等等）
2. 文本从word复制粘贴过来后坚持花样
3. 打消重做
4. 扩大才能（自定义toolbar，插件（内容的扩大性））
5. 高等功用（公式，表格等等）

构造剖析

目次构造

- quill.js
- core.js
- 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

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

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既是表达文档，又表达文档修正。

delta作为一种形貌内容修正的数据构造，负担用户操作和DOM修正之间言语的作用

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

难点

dom修正后，怎样同步到delta?

浅易流程：dom 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);
}

然后editor会监听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

营业实践

vue-quill-practice
中的src/components/RichTextEditor/index.vue供应一些示例, 然则由于是从营业代码中拿出来的，缺乏许多依靠的东西，没法运转。仅供参考，供应思绪。

重要功用

• magicUrl （url文本被自动转为url链接，可点击跳转）
• imageDrop （图片拖放，复制粘贴上传）
• imageResize （图片缩放，程度位置调解）
• mention （@职员）
• 预览形式点击图片自转动层放大显现（依靠v-viewer）
• 自定义link按钮行动，点击弹窗填写链接称号和url, 肯定后插进去编辑器
• 自定义image按钮行动，点击挑选图片并上传
• 自定义Quote Blot(援用块, 相似企业微信的援用块)

生态

文档：官方文档，github, 中文文档（有人翻译了，然则翻译的不好，直接看官方的吧）
插件：https://github.com/quilljs/aw…
连系vue：vue-quill-editor
连系react: react-quill

参考资料

深切明白quilljs
github quill