Quill編輯器實作原理初探

簡介

從事前端開發的同學，對富文本編輯器都不是很陌生，但是大多數富文本編輯器都是開箱即用，很少會對其實作原理進行深入的探討，假如靜下心去細細品味，會發現想要做好一款富文本編輯器，需要對整個前端生態有較深入的理解，在某種意義上說，富文本編輯器是前端一個集大成者，

富文本編輯器根據其實作方式，業內將其劃分為L0 ~ L2，層層遞進，功能的支撐也越來越強大，

L0級編輯器，基于contenteditable與document.execCommand指令，直接操作DOM，簡單粗暴，所見即所得，其優點是簡單，我們只需要聚焦在視圖層，document.execCommand自身也提供一些操作指令，可以滿足基本的文本操作需求，個性化的需求也可以通過封裝自定義指令來滿足；同理，缺點也很明顯，只關注視圖層，沒有邏輯抽象，對于操作記錄，檔案結構變化，是黑盒，對于檔案的版本管理、協同辦公之類的需求，無能為力，因此，帶著痛點，孕育出了L1級編輯器，

L1級編輯器核心亮點為增加了一層DOM抽象，用資料去驅動視圖的更新，HTML是一門標記語言，沒有較強邏輯性，而且可以層層嵌套，元素的種類又分為行內元素、行內塊元素、塊級元素，每個元素的表現形式又有區別，刪繁就簡，客觀描述出每個元素的結構與行為，會讓整個檔案變得自主可控，字符是分散在不同的DOM節點中，樹形結構遍歷的時間復雜度是O(n*h)，這無疑是一種巨大的性能消耗，因此L1級編輯器，用一種扁平化的資料結構去描述字符的位置、樣式，這樣對于字符查找、字符操作，會提升不少性能，具體實作細節也是很復雜的，后面會慢慢介紹，

L0、L1級編輯器，自身并沒有脫離DOM,底層還是依賴于contenteditable，還是受限于瀏覽器自身，比如頁面排版、焦點、選區等，但是到了L2級編輯器，就脫離了瀏覽器原生操作，使用canvas或svg來實作內容編排，焦點、選區等操作都是自身手動去實作，這部分過于復雜，也只有Google、WPS之類的廠商才有實力去研發，我們不做過多的深究，

Quill編輯器API比較簡單，概念比較清晰，上手也比prosemirror簡單，又有底層定制開發能力，使用范圍較廣，本文將簡單介紹Quill的一些核心概念和操作程序，實作細節在后續的文章中慢慢介紹，

Quill 基本原理

通過簡介中的介紹，我們知道L1級編輯器的幾個核心概念，

1. document檔案資料模型（對應Quill中的Parchment）
2. DOM節點Node的描述（對應Quill中的Blot）
3. 一種扁平化的字符位置、樣式描述（對應Quill中的Delta）

下文我們對以上Quill中的概念做進一步的描述，

核心概念

• Delta

套用官網的話,什么是Delta?

這段話翻譯為中文為：“Deltas是一種簡單而富有表現力的格式，可以用來描述Quill的內容和變化，該格式是JSON的嚴格子集，是人類可讀的，機器很容易決議，Deltas可以描述任何Quill檔案，包括所有文本和格式資訊，沒有HTML的歧義和復雜性，”

一個Delta資料結構表現形式：

// 編輯器初始值
{
  "ops": [
    { "insert": "Hello " },
    { "insert": "World" },
  ]
}
// 給World加粗后的值
// 3種動作：insert: 插入，retain：保留， delete：洗掉
{
  "ops": [
    { "retain": 6 },
    { "retain": 5, "attributes": { "bold": true } }
  ]
}

這個能力使檔案協同編輯成為了可能，最簡單的協同編輯，通過以下幾步操作即可：

1. 監聽編輯器文本改變text-change，獲取資料改變的描述Delta
2. 通過websocket將Delta分發給每位協同編輯用戶
3. 呼叫Quill實體中UpdateContents，更新協同編輯檔案

Delta對于檔案的位置、樣式描述，極大的簡化檔案操作，最原始的檔案查找替換，需要深度優先遍歷，還需要遞回查找，十分不便，有了Delta，它精準的描述了每個字符的位置，我們就可以像處理純文本一樣處理富文本，

• Parchment與Blot

Parchment是document的資料抽象，而Blot是對Node節點的抽象，也就是說，Parchment是Blot的父級，很多個Blot組裝成一個Parchment，

Blot分類：

• ContainerBlot(容器節點)
• ScrollBlot root(檔案的根節點，不可格式化)
• BlockBlot 塊級(可格式化的父級節點)
• InlineBlot 行內(可格式化的父級節點)

ScrollBlot的實體資料結構：

{
  "domNode": {}, // 真實的DOM節點
  "prev": null, // 前一個元素
  "next": null, // 后一個元素
  "uiNode": null,
  "registry": { // 注冊的資訊
    "attributes": {},
    "classes": {},
    "tags": {},
    "types": {}
  },
  "children": { // 子元素的節點描述，為一個鏈表
    "head": null, // 第一個元素
    "tail": null, // 最后一個元素
    "length": 0 // 子元素長度
  },
  "observer": {} // DOM監聽器
}

DOM變化與Parchment之間的資料同步

檔案資料描述固然好，但是真實DOM和資料模型如何實作實時同步呢？

在ScrollBlot中，有個MutationObserver，去實時監測DOM變化，當DOM發生變化時，會根據偵測到的真實DOM,去查找對應節點的blot資訊，真實DOM與blot快取在Registry中，以一個WeakMap的形式存盤，具體快取可見：

// parchment\src\registry.ts
public static blots = new WeakMap<Node, Blot>();

根據MutationObserver回呼的變化資訊，執行對應的blot update，以blockBlot為例，其update方法如下：

// 
public update(
  mutations: MutationRecord[],
  _context: { [key: string]: any },
): void {
  // 呼叫ParentBlot中update方法，對新增和洗掉節點做邏輯同步
  super.update(mutations, context);
  // 更新樣式的邏輯同步
  const attributeChanged = mutations.some(
    (mutation) =>
      mutation.target === this.domNode && mutation.type === 'attributes',
  );
  if (attributeChanged) {
    this.attributes.build();
  }
}

Parchment映射成Delta的程序

有了Parchment對DOM的抽象，就方便對檔案字符位置和樣式進行扁平化的描述，以編輯器初始化為例，看看Quill是如何獲取檔案模型的Delta，

1. 獲取ScrollBlot中所有的Block，默認從Block開始處理，即最小顆粒度是塊級元素

// editor.ts中獲取delta方法
getDelta(): Delta {
  return this.scroll.lines().reduce((delta, line) => {
    // 以Block為維度，分別獲取每行的delta描述
    return delta.concat(line.delta());
  }, new Delta());
}
// scroll.ts中獲取所有line的方法，即Block
lines(index = 0, length = Number.MAX_VALUE): (Block | BlockEmbed)[] {
    const getLines = (
      blot: ParentBlot,
      blotIndex: number,
      blotLength: number,
    ) => {
      let lines = [];
      let lengthLeft = blotLength;
      blot.children.forEachAt(
        blotIndex,
        blotLength,
        (child, childIndex, childLength) => {
          // 最小顆粒度為Block
          if (isLine(child)) {
            lines.push(child);
          } else if (child instanceof ContainerBlot) {
            lines = lines.concat(getLines(child, childIndex, lengthLeft));
          }
          lengthLeft -= childLength;
        },
      );
      return lines;
    };
    return getLines(this, index, length);
  }

2. 獲取每行資料的delta描述

// block.ts
delta(): Delta {
  if (this.cache.delta == null) {
    this.cache.delta = blockDelta(this);
  }
  return this.cache.delta;
}

function blockDelta(blot: BlockBlot, filter = true) {
  return (
    blot
      // @ts-expect-error
      .descendants(LeafBlot) // 獲取所有葉子節點
      .reduce((delta, leaf: LeafBlot) => {
        if (leaf.length() === 0) { // 葉子節點的長度
          return delta;
        }
        // 插入一個delta描述符，包含位置，樣式描述
        return delta.insert(leaf.value(), bubbleFormats(leaf, {}, filter));
      }, new Delta())
      .insert('\n', bubbleFormats(blot))
  );
}

獲取delta的程序也是遍歷至葉子節點，根據葉子節點的位置進行計算，

結語

以上只是對Quill的核心概念的簡單描述，還有很多細節沒有做過多的闡述，如如何注冊自定義擴展、Quill的渲染流程、Parchment架構等，后續文章會慢慢進行闡述，

參考資料

• Quill
• Quill富文本編輯器的實踐
• 深入淺出QuillJS

標籤：JavaScript

上一篇：第122篇: JS函式一些基本概念

下一篇：這些 JavaScript 筆試題你能答對幾道？