DevUI是一支兼具設計視角和工程視角的團隊，服務於華為雲DevCloud平臺和華為內部數箇中後臺系統，服務於設計師和前端工程師。
官方網站：devui.design
Ng元件庫：ng-devui（歡迎Star）
引言
在 Web 開發領域，富文字編輯器（ Rich Text Editor ）是一個使用場景非常廣，又非常複雜的元件。
要從0開始做一款好用、功能強大的富文字編輯器並不容易，基於現有的開源庫進行開發能節省不少成本。
Quill 是一個很不錯的選擇。
本文主要介紹Quill內容渲染相關的基本原理，主要包括：
- Quill描述編輯器內容的方式
- Quill將Delta渲染到DOM的基本原理
- Scroll類管理所有子Blot的基本原理
Quill如何描述編輯器內容？
Quill簡介
Quill 是一款API驅動、易於擴充套件和跨平臺的現代 Web 富文字編輯器。目前在 Github 的 star 數已經超過25k。
Quill 使用起來也非常方便，簡單幾行程式碼就可以建立一個基本的編輯器：
<script>
var quill = new Quill('#editor', {
theme: 'snow'
});
</script>
Quill如何描述格式化的文字
當我們在編輯器裡面插入一些格式化的內容時，傳統的做法是直接往編輯器裡面插入相應的 DOM，通過比較 DOM 樹來記錄內容的改變。
直接操作 DOM 的方式有很多不便，比如很難知道編輯器裡面某些字元或者內容到底是什麼格式，特別是對於自定義的富文字格式。
Quill 在 DOM 之上做了一層抽象，使用一種非常簡潔的資料結構來描述編輯器的內容及其變化：Delta。
Delta 是JSON的一個子集，只包含一個 ops 屬性，它的值是一個物件陣列，每個陣列項代表對編輯器的一個操作（以編輯器初始狀態為空為基準）。
比如編輯器裡面有"HelloWorld"：
用 Delta 進行描述如下：
{
"ops": [
{ "insert": "Hello " },
{ "insert": "World", "attributes": { "bold": true } },
{ "insert": "\n" }
]
}意思很明顯，在空的編輯器裡面插入"Hello "，在上一個操作後面插入加粗的"World"，最後插入一個換行"n"。
Quill如何描述內容的變化
Delta 非常簡潔，但卻極富表現力。
它只有3種動作和1種屬性，卻足以描述任何富文字內容和任意內容的變化。
3種動作：
- insert：插入
- retain：保留
- delete：刪除
1種屬性：
- attributes：格式屬性
比如我們把加粗的"World"改成紅色的文字"World"，這個動作用 Delta 描述如下：
{
"ops": [
{ "retain": 6 },
{ "retain": 5, "attributes": { "color": "#ff0000" } }
]
}意思是：保留編輯器最前面的6個字元，即保留"Hello "不動，保留之後的5個字元"World"，並將這些字元設定為字型顏色為"#ff0000"。
如果要刪除"World"，相信聰明的你也能猜到怎麼用 Delta 描述，沒錯就是你猜到的：
{
"ops": [
{ "retain": 6 },
{ "delete": 5 }
]
}Quill如何描述富文字內容
最常見的富文字內容就是圖片，Quill 怎麼用 Delta 描述圖片呢？
insert 屬性除了可以是用於描述普通字元的字串格式之外，還可以是描述富文字內容的物件格式，比如圖片：
{
"ops": [
{ "insert": { "image": "https://quilljs.com/assets/images/logo.svg" } },
{ "insert": "\n" }
]
}比如公式：
{
"ops": [
{ "insert": { "formula": "e=mc^2" } },
{ "insert": "\n" }
]
}Quill 提供了極大的靈活性和可擴充套件性，可以自由定製富文字內容和格式，比如幻燈片、思維導圖，甚至是3D模型。
setContent如何將Delta資料渲染成DOM？
上一節我們介紹了 Quill 如何使用 Delta 描述編輯器內容及其變化，我們瞭解到 Delta 只是普通的 JSON 結構，只有3種動作和1種屬性，卻極富表現力。
那麼 Quill 是如何應用 Delta 資料，並將其渲染到編輯器中的呢？
setContents 初探
Quill 中有一個 API 叫 setContents，可以將 Delta 資料渲染到編輯器中，本期將重點解析這個 API 的實現原理。
還是用上一期的 Delta 資料作為例子：
const delta = { "ops": [
{ "insert": "Hello " },
{ "insert": "World", "attributes": { "bold": true } },
{ "insert": "\n" } ]
}當使用 new Quill() 建立好 Quill 的例項之後，我們就可以呼叫它的 API 啦。
const quill = new Quill('#editor', {
theme: 'snow'
});我們試著呼叫下 setContents 方法，傳入剛才的 Delta 資料：
quill.setContents(delta);編輯器中就出現了我們預期的格式化文字：
setContents 原始碼
通過檢視 setContents 的原始碼，發現就呼叫了 modify 方法，主要傳入了一個函式：
setContents(delta, source = Emitter.sources.API) {
return modify.call( this, () => {
delta = new Delta(delta);
const length = this.getLength();
const deleted = this.editor.deleteText(0, length);
const applied = this.editor.applyDelta(delta);
... // 為了方便閱讀，省略了非核心程式碼
return deleted.compose(applied);
}, source, );
}使用 call 方法呼叫 modify 是為了改變其內部的 this 指向，這裡指向的是當前的 Quill 例項，因為 modify 方法並不是定義在 Quill 類中的，所以需要這麼做。
我們先不看 modify 方法，來看下傳入 modify 方法的匿名函式。
該函式主要做了三件事：
- 把編輯器裡面原有的內容全部刪除
- 應用傳入的 Delta 資料，將其渲染到編輯器中
- 返回1和2組合之後的 Delta 資料
我們重點看第2步，這裡涉及到 Editor 類的 applyDelta 方法。
applyDelta 方法解析
根據名字大概能猜到該方法的目的是：把傳入的 Delta 資料應用和渲染到編輯器中。
它的實現我們大概也可以猜測就是：迴圈 Delta 裡的 ops 陣列，一個一個地應用到編輯器中。
它的原始碼一共54行，大致如下：
applyDelta(delta) {
let consumeNextNewline = false;
this.scroll.update();
let scrollLength = this.scroll.length();
this.scroll.batchStart();
const normalizedDelta = normalizeDelta(delta);
normalizedDelta.reduce((index, op) => {
const length = op.retain || op.delete || op.insert.length || 1;
let attributes = op.attributes || {};
// 1.插入文字
if (op.insert != null) {
if (typeof op.insert === 'string') {
// 普通文字內容
let text = op.insert;
... // 為了閱讀方便，省略非核心程式碼
this.scroll.insertAt(index, text);
... // 為了閱讀方便，省略非核心程式碼
} else if (typeof op.insert === 'object') {
// 富文字內容
const key = Object.keys(op.insert)[0];
// There should only be one key
if (key == null) return index;
this.scroll.insertAt(index, key, op.insert[key]);
}
scrollLength += length;
}
// 2.對文字進行格式化
Object.keys(attributes).forEach(name => {
this.scroll.formatAt(index, length, name, attributes[name]);
});
return index + length;
}, 0);
... // 為了閱讀方便，省略非核心程式碼 this.scroll.batchEnd();
this.scroll.optimize();
return this.update(normalizedDelta);
}和我們猜測的一樣，該方法就是用 Delta 的 reduce 方法對傳入的 Delta 資料進行迭代，將插入內容和刪除內容的邏輯分開了，插入內容的迭代裡主要做了兩件事：
- 插入普通文字或富文字內容：insertAt
- 格式化該文字：formatAt
至此，將 Delta 資料應用和渲染到編輯器中的邏輯，我們已經解析完畢。
下面做一個總結：
- setContents 方法本身沒有什麼邏輯，僅僅是呼叫了 modify 方法而已
- 在傳入 modify 方法的匿名函式中呼叫了 Editor 物件的 applyDelta 方法
- applyDelta 方法對傳入的 Delta 資料進行迭代，並依次插入/格式化/刪除 Delta 資料所描述的編輯器內容
Scroll如何管理所有的Blot型別？
上一節我們介紹了 Quill 將 Delta 資料應用和渲染到編輯器中的原理：通過迭代 Delta 中的 ops 資料，將 Delta 行一個一個渲染到編輯器中。
瞭解到最終內容的插入和格式化都是通過呼叫 Scroll 物件的方法實現的，Scroll 物件到底是何方神聖？在編輯器的操作中發揮了什麼作用？
Scroll 物件的建立
上一節的解析終止於 applyDelta 方法，該方法最終呼叫了 this.scroll.insertAt 將 Delta 內容插入到編輯器中。
applyDelta 方法定義在 Editor 類中，在 Quill 類的 setContents 方法中被呼叫，通過檢視原始碼，發現 this.scroll 最初是在 Quill 的建構函式中被賦值的。
this.scroll = Parchment.create(this.root, {
emitter: this.emitter,
whitelist: this.options.formats
});Scroll 物件是通過呼叫 Parchment 的 create 方法建立的。
前面兩期我們簡單介紹了 Quill 的資料模型 Delta，那麼 Parchment 又是什麼呢？它跟 Quill 和 Delta 是什麼關係？這些疑問我們先不解答，留著後續詳細講解。
先來簡單看下 create 方法是怎麼建立 Scroll 物件的，create 方法最終是定義在 parchment 庫原始碼中的 registry.ts 檔案中的，就是一個普通的方法：
export function create(input: Node | string | Scope, value?: any): Blot {
// 傳入的 input 就是編輯器主體 DOM 元素（.ql-editor），裡面包含了編輯器裡所有可編輯的實際內容
// match 是通過 query 方法查詢到的 Blot 類，這裡就是 Scroll 類
let match = query(input);
if (match == null) {
throw new ParchmentError(`Unable to create ${input} blot`);
}
let BlotClass = <BlotConstructor>match;
let node = input instanceof Node || input['nodeType'] === Node.TEXT_NODE
? input
: BlotClass.create(value);
// 最後返回 Scroll 物件
return new BlotClass(<Node>node, value);
}create 方法的入參是編輯器主體 DOM 元素 .ql-editor，通過呼叫同檔案中的 query 普通方法，查詢到 Blot 類是 Scroll 類，查詢的大致邏輯就是在一個 map 表裡查，最後通過 new Scroll() 返回 Scroll 物件例項，賦值給 this.scroll。
{
ql-cursor: ƒ Cursor(domNode, selection),
ql-editor: ƒ Scroll(domNode, config), // 這個就是 Scroll 類
ql-formula: ƒ FormulaBlot(),
ql-syntax: ƒ SyntaxCodeBlock(),
ql-video: ƒ Video(),
}Scroll 類詳解
Scroll 類是我們解析的第一個 Blot 格式，後續我們將遇到各種形式的 Blot 格式，並且會定義自己的 Blot 格式，用於在編輯器中插入自定義內容，這些 Blot 格式都有類似的結構。
可以簡單理解為 Blot 格式是對 DOM 節點的抽象，而 Parchment 是對 HTML 文件的抽象，就像 DOM 節點是構成 HTML 文件的基本單元一樣，Blot 是構成 Parchment 文件的基本單元。
比如：DOM 節點是<div>，對其進行封裝變成 <div class="ql-editor">，並在其內部封裝一些屬性和方法，就變成 Scroll 類。
Scroll 類是所有 Blot 的根 Blot，它對應的 DOM 節點也是編輯器內容的最外層節點，所有編輯器內容都被包裹在它之下，可以認為 Scroll 統籌著其他 Blot 物件（實際 Scroll 的父類 ContainerBlot 才是幕後總 BOSS，負責總的排程）。
<div class="ql-editor" contenteditable="true">
<p>
Hello
<strong>World</strong>
</p>
... // 其他編輯器內容
</div>Scroll 類定義在 Quill 原始碼中的 blots/scroll.js 檔案中，之前 applyDelta 方法中通過 this.scroll 呼叫的 insertAt / formatAt / deleteAt / update / batchStart / batchEnd / optimize 等方法都在 Scroll 類中。
以下是 Scroll 類的定義：
class Scroll extends ScrollBlot {
constructor(domNode, config) {
super(domNode);
...
}
// 標識批量更新的開始，此時執行 update / optimize 都不會進行實際的更新
batchStart() {
this.batch = true;
}
// 標識批量更新的結束
batchEnd() {
this.batch = false;
this.optimize();
}
// 在制定位置刪除制定長度的內容
// 比如：deleteAt(6, 5) 將刪除 "World"
// 在 Quill 的 API 中對應 deleteText(index, length, source) 方法
deleteAt(index, length) {}
// 設定編輯器的可編輯狀態
enable(enabled = true) {
this.domNode.setAttribute('contenteditable', enabled);
}
// 在制定位置用制定格式格式化制定長度的內容
// 比如：formatAt(6, 5, 'bold', false) 將取消 "World" 的粗體格式
// 在 Quill 的 API 中對應 formatText(index, length, name, value, source) 方法 formatAt(index, length, format, value) {
if (this.whitelist != null && !this.whitelist[format]) return;
super.formatAt(index, length, format, value); this.optimize();
}
// 在制定位置插入內容
// 比如：insertAt(11, '\n你好，世界');
// 在 Quill 的 API 中對應 insertText(index, text, name, value, source)
// Quill 中的 insertText 其實是 Scroll 的 insertAt 和 formatAt 的複合方法
insertAt(index, value, def) {}
// 在某個 Blot 前面插入 Blot
insertBefore(blot, ref) {}
// 彈出當前位置 Blot 路徑最外面的葉子 Blot（會改變原陣列）
leaf(index) { return this.path(index).pop() || [null, -1]; }
// 實際上呼叫的是父類 ContainerBlot 的 descendant 方法
// 目的是得到當前位置所在的 Blot 物件
line(index) {
if (index === this.length()) {
return this.line(index - 1);
}
return this.descendant(isLine, index);
}
// 獲取某一範圍的 Blot 物件
lines(index = 0, length = Number.MAX_VALUE) {}
// TODO
optimize(mutations = [], context = {}) {
if (this.batch === true) return;
super.optimize(mutations, context);
if (mutations.length > 0) {
this.emitter.emit(Emitter.events.SCROLL_OPTIMIZE, mutations, context);
}
}
// 實際上呼叫的是父類 ContainerBlot 的 path 方法
// 目的是得到當前位置的 Blot 路徑，並排除 Scroll 自己
// Blot 路徑就和 DOM 節點路徑是對應的
// 比如：DOM 節點路徑 div.ql-editor -> p -> strong，
// 對應 Blot 路徑就是 [[Scroll div.ql-editor, 0], [Block p, 0], [Bold strong, 6]]
path(index) {
return super.path(index).slice(1); // Exclude self
}
// TODO
update(mutations) {
if (this.batch === true) return;
...
}
}
Scroll.blotName = 'scroll';
Scroll.className = 'ql-editor';
Scroll.tagName = 'DIV';
Scroll.defaultChild = 'block';
Scroll.allowedChildren = [Block, BlockEmbed, Container];
export default Scroll;Scroll 類上定義的靜態屬性 blotName 和 tagName 是必須的，前者用於唯一標識該 Blot 格式，後者對應於一個具體的 DOM 標籤，一般還會定義一個 className，如果該 Blot 是一個父級 Blot，一般還會定義 allowedChildren 用來限制允許的子級 Blot 白名單，不在白名單之內的子級 Blot 對應的 DOM 將無法插入父類 Blot 對應的 DOM 結構裡。
Scroll 類中除了定義了插入 / 格式化 / 刪除內容的方法之外，定義了一些很實用的用於獲取當前位置 Blot 路徑和 Blot 物件的方法，以及觸發編輯器內容更新的事件。
相應方法的解析都在以上原始碼的註釋裡，其中 optimize 和 update 方法涉及 Quill 中的事件和狀態變更相關邏輯，放在後續單獨進行解析。
關於 Blot 格式的規格定義文件可以參閱以下文章：
https://github.com/quilljs/parchment#blots
我也是初次使用Quill進行富文字編輯器的開發，難免有理解不到位的地方，歡迎大家提意見和建議。
加入我們
我們是DevUI團隊，歡迎來這裡和我們一起打造優雅高效的人機設計/研發體系。招聘郵箱：muyang2@huawei.com。
文/DevUI Kagol