摘要：與的關系既是表達文檔，又表達文檔修改。然后會監聽事件，然后觸發的方法，傳入參數，然后在的方法中，會依據構建出對應的數組，與已有的合并，使當前保持最新。

quill
API驅動設計,自定義內容和格式化,跨平臺,易用.

CKEditor
功能強，配置靈活，ui漂亮，兼容性差

TinyMCE
文檔好，功能強，bug少，無外部依賴。

UEditor
功能齊全，但是不維護了，依賴jquery，自定義起來較復雜。

常見功能

基本文本編輯功能（加粗，加斜，字體大小，顏色等等）

文本從word復制粘貼過來后保持格式

撤銷重做

擴展能力（自定義toolbar，插件（內容的擴展性））

高級功能（公式，表格等等）

- 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中的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的注冊。

delta既是表達文檔，又表達文檔修改。

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