富文本Quill簡單分析源碼

前言

能力有限，源碼分析資料有限，分析的不是很到位，還有可能有錯，但願你們能夠提出意見和建議

1、 Quills是什麼？

Quill是一種現代的富文本編輯器，旨在實現兼容性和可擴展性

首先學習源碼以前咱們要知道parchment 和delta

2、parchment

Parchment是Quill的文檔模型。它是一個並行的樹結構，而且提供對內容的編輯（如Quill）的功能。一個Parchment樹是有Blots組成的，它反映了一個DOM對應的節點。Blots可以提供結構、格式和內容或者只有內容。Attributors可以提供輕量級的格式化信息。好比用戶打了一個"你",在parchment樹中就會產生一個節點與之對應

2.1 Blot

Blots 是Parchment文檔的基本組成部分。 提供了幾個基本的實現：Block、Inline和Embed。通常來講，你會想擴展其中的一個，而不是從頭開始構建。實現以後，須要在使用以前進行註冊。

一個最基本的Blots必須使用一個靜態的blotName來命名，而且有一個與之相關聯的tagName或者className。若是一個Blot是經過標籤和類定義的，類是第一優先級，標籤被用做備用。Blots還必須有一個範圍，來肯定他是內聯（inline）仍是分塊（block）。

簡單來講： 就是DOM節點，經過blotName命名,設置一個tabName

2.2 Attributors :

Attributors是一種輕量級的格式化方式。它們的DOM對應的是屬性。像DOM屬性和節點的關係同樣，Attributors也屬於Blots。調用Inline或者Block Blot的formats()方法將會返回相應的DOM節點的格式（若是有的話）以及DOM節點屬性表示的格式（若是有的話）。

簡單來講： 就是添加樣式

源碼結構：

1.入口：quill/quill.js

2. parchment擴展註冊了一些blots節點 ： quill/core.js

3. 建立Quill ： quill/core/quill.js (核心)

構造器裏 建立了DOM的結構，一些class值，屬性值。而後實例化了各類類好比： new Emitter，（parchment的實例化是create），new Editor， new Selection ，而後就是options的各類配置：主題、歷史、佔位符、只讀、模塊等。

3. 看下formats/blod.js 都寫了什麼

1. 建立一個strong 節點

   

2. 插入到Quill中 quill/quill.js(不寫下面的代碼是不會插入的)

import Bold from './formats/bold';
Quill.register({
  'formats/bold': Bold,
}, true);
export default Quill;
複製代碼

3、delta

Deltas是一種簡單而富有表現力的格式，能夠用來描述Quill的內容和改變。這種格式本質上是JSON。

Deltas是做爲一個獨立庫實現的，容許在Quill以外使用。它適用於操做轉換，能夠實時使用像Google Docs同樣的應用程序。

注意：不建議手動構建Deltas，可使用鏈式方法insert()、delete()和retain()調用來建立新的Deltas。

改變：

在註冊Quill的text-chagne事件時，你會得到一個描述Delta改變了什麼的參數。除了insert操做，這個Delta可能有delete或者retain操做。

1. delete：

刪除操做明確的指出它意味着：刪除下一個字符數。（不可逆）

2. retain：

保留操做僅僅意味着保留下一個字符數，而不須要修改。若是指定了attributes，它仍然意味着保留這些字符，但應用由屬性對象指定的格式。若是屬性值爲null用戶刪除指定格式。