DevUI 是一款面向企業中后臺產品的開源前端解決方案，它倡導沉浸、靈活、至簡的設計價值觀，提倡設計者為真實的需求服務，為多數人的設計，拒絕嘩眾取寵、取悅眼球的設計。如果你正在開發 ToB 的工具類產品，DevUI 將是一個很不錯的選擇！

引言

富文本編輯器大概是最復雜、使用場景卻極廣的組件了。

可以說富文本編輯器讓Web數據錄入充滿了無限的想象空間，如果只有文本框、下拉框這些純文本的數據錄入組件，那么Web的數據錄入能力將極大地受限。我們將無法在網頁上插入圖片、視頻這些富文本內容，更無法插入自定義的內容。

富文本編輯器讓Web內容編輯變得更輕松、更高效，我們幾乎可以在富文本編輯器中插入任何你想插入的內容，圖片、視頻、超鏈接、公式、代碼塊，都不在話下，甚至還可以插入表格、PPT、思維導圖，甚至3D模型這種超復雜的自定義內容。

富文本編輯器的場景在Web上也是隨處可見，寫文章、寫評論、意見反饋、錄需求單，都需要使用到富文本。

本文結合DevUI團隊在富文本組件中的實踐，從使用場景、技術選型，再到對Quill的擴展，以及Quill的基本原理，跟大家分享Quill富文本編輯器的那些事兒。

本文主要由以下部分組成：

富文本編輯器的使用場景
技術選型
我們為什么選擇Quill
如何擴展Quill
Quill基本原理

以下內容來自Kagol在華為 HWEB 大前端技術分享會上的演講。

富文本編輯器的使用場景

博客文章
Wiki詞條
工作項描述
測試用例步驟
反饋意見
評論
…

技術選型

我們的需求：

開源協議友好
Angular框架或框架無關
靈活可擴展
支持插入/編輯表格和圖片
插件豐富，生態好

選型分析

首先排除官方不維護的UEditor
然后排除React框架專屬的Draft.js和Slate
接著排除開源協議不友好的CKEditor
由于我們的業務場景豐富，需要富文本插入/編輯表格的功能，所以還需要排除不支持表格的Trix，弱支持表格的Etherpad和Prosemirror，以及表格功能收費的TinyMCE
最后只剩下Quill和wangEditor兩款編輯器可選，wangEditor的擴展性和生態不如Quill，所以最終選擇Quill作為富文本組件的基座

為什么選擇Quill？

BSD協議，商業友好
文檔詳細，上手快
API驅動，擴展性好
插件豐富，生態好

文檔詳細

Document：https://quilljs.com/

介紹Quill的API：

介紹如何擴展Quill：

上手快

安裝Quill：npm i quill
引入樣式：@import 'quill/dist/quill.snow.css';
引入Quill：import Quill from 'quill';
初始化Quill：new Quill('#editor', { theme: 'snow' });

效果圖：

API驅動，擴展性好

插件豐富，生態好

擴展Quill

插入標簽

比如我想在編輯器里插入標簽

上傳附件

比如我想在編輯器里插入附件

插入表情

比如我想在編輯器中插入表情

類似語雀的評論：https://www.yuque.com/yuque/blog/sguhed

個性分割線

比如我想插入B站這種個性化的分割線

超鏈接卡片

比如我想插入知乎這樣的超鏈接卡片

如何插入表情？

我們從如何插入表情入手，一起看看怎么在Quill中插入自定義的內容。

要在Quill中插入表情，只需要以下四步：

第一步：自定義工具欄按鈕
第二步：自定義Blot內容EmojiBlot
第三步：在Quill注冊EmojiBlot
第四步：調用Quill的API插入表情

第一步：自定義工具欄按鈕

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    // 配置工具欄模塊
    toolbar: {
      container: [ …, [ 'emoji' ] ], // 增加一個按鈕
      handlers: {
        // 添加按鈕的處理邏輯
        emoji() {
          console.log('插入表情');
        }
      }
    },
  }
});

給工具欄按鈕增加圖標

// 擴展Quill內置的icons配置
const icons = Quill.import('ui/icons');
icons.emoji = ‘<svg>…</svg>’; // 圖標的svg可以從iconfont網站復制

效果如下：

工具欄上已經多了一個表情的按鈕，并且能夠響應鼠標點擊事件，下一步就是要
編寫插入表情的具體邏輯，這涉及到Quill的自定義內容相關的知識。

第二步：自定義Blot內容EmojiBlot

Quill中的Blot就是一個普通的ES6 Class，由于表情和圖片的差別就在于：

Quill內置的圖片格式不支持自定義寬高，而我們要插入的表情是需要特定的寬高的。

因此我們可以基于Quill內置的image格式來擴展。

emoji.ts

import Quill from 'quill';

const ImageBlot = Quill.import('formats/image');

// 擴展Quill內置的image格式
class EmojiBlot extends ImageBlot {
  static blotName = 'emoji'; // 定義自定義Blot的名字（必須全局唯一）
  static tagName = 'img'; // 自定義內容的標簽名

  // 創建自定義內容的DOM節點
  static create(value): any {
    const node = super.create(value);
    node.setAttribute('src', ImageBlot.sanitize(value.url));
    if (value.width !== undefined) {
      node.setAttribute('width', value.width);
    }
    if (value.height !== undefined) {
      node.setAttribute('height', value.height);
    }
    return node;
  }
  
  // 返回options數據
  static value(node): any {
    return {
      url: node.getAttribute('src'),
       node.getAttribute('width'),
      height: node.getAttribute('height')
    };
  }
}

export default EmojiBlot;

第三步：在Quill注冊EmojiBlot

有了EmojiBlot，要將其插入Quill編輯器中，還需要將這個ES6類注冊到Quill中。

import EmojiBlot from './formats/emoji';
Quill.register('formats/emoji', EmojiBlot);

第四步：調用Quill的API插入表情

EmojiBlot注冊到Quill中之后，Quill就能認識它了，也就可以調用Quill的API將其插入到編輯器中。

emoji(): void {
  console.log(‘插入表情');
  // 獲取當前光標位置
  const index = this.quill.getSelection().index;
  // 在當前光標處插入emoji（blotName）
  this.quill.insertEmbed(index, 'emoji', {
    url: 'assets/emoji/good.png',
     '64px',
  });
},

效果圖

Demo源碼

源碼鏈接：https://gitee.com/kagol/quill-demo

也歡迎關注我們DevUI組件庫的官網，了解更多有趣又實用的開源組件！

DevUI官網：https://devui.design

Quill基本原理

最后講一講Quill的基本原理。

基本原理

使用Delta數據模型描述富文本內容及其變化，以保證行為的可預測
通過Parchment對DOM進行抽象，以保證平臺一致性
通過Mutation Observe監聽DOM節點的變化，將DOM的更改同步到Delta數據模型中

Quill如何表達編輯器內容？

Delta數據模型

通過Delta數據模型來描述富文本內容及其變化

Delta 是JSON的一個子集，只包含一個 ops 屬性，它的值是一個對象數組，每個數組項代表對編輯器的一個操作（以編輯器初始狀態為空為基準）。

{
  "ops": [
    { "insert": "Hello " },
    { "insert": "World", "attributes": { "bold": true } },
    { "insert": "
" }
  ]
}

修改編輯器內容

比如我們把加粗的"World"改成紅色的文字"World"，這個動作用 Delta 描述如下：

{
  "ops": [
    { "retain": 6 },
    { "retain": 5, "attributes": { "color": "#ff0000" } }
  ]
}

意思是：保留編輯器最前面的6個字符，即保留"Hello "不動，保留之后的5個字符"World"，并將這些字符設置為字體顏色為"#ff0000"。

刪除編輯器內容

如果要刪除"World"呢？

{
  "ops": [
    { "retain": 6 },
    { "delete": 5 }
  ]
}

即：保留前面6個字符（’Hello ’），刪除之后的5個字符（’World’）

Quill如何渲染內容？

渲染富文本內容的基本原理：
遍歷Delta數組，將其中描述的內容一個一個應用（插入/格式化/刪除）到編輯器中。

詳情可參考DevUI專欄文章：

《Quill的內容渲染機制》

Quill如何擴展編輯器的能力？

擴展Quill的方式：

通過自定義Blot格式來擴展編輯器的內容
通過自定義模塊來擴展編輯器的功能

詳情可參考DevUI專欄文章：

《現代富文本編輯器Quill的模塊化機制》

THANK YOU！

總結

以上是生活随笔為你收集整理的Quill富文本编辑器的实践的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。