重回鐵王座！時隔5年！Quill 2.0 終於發佈啦🎉 詳情 - 前端,富文本編輯器,quill Kagol 博客

你好，我是 Kagol。

2024年4月17日，Quill 2.0 正式發佈🎉

最後一個 1.0 版本 1.3.7 發佈於 2019年9月9日，時隔4年零7個月。

富文本編輯器擁有非常豐富的使用場景，我在做 OpenTiny 開源運營過程中，也經常有用户問：OpenTiny 有富文本嗎？

於是在2023年6月，我們開始規劃富文本組件，做技術選型時，考慮了 Quill、Tiptap、Editor.js、TinyMCE 等多款開源富文本，最終還是選擇了 Tiptap，Tiptap 本身很優秀、且能滿足我們的需求是一方面，另一個原因是我們覺得 Quill 已經“死了”，因為它已經4年不發版本了。

Quill 2.0 的第一個 dev 版本 2.0.0-dev.0 是2018年7月2日發佈的，同年10月份發完 2.0.0-dev.3 之後，2.0 版本一直沒有動靜、似乎遙遙無期，很多開發者在 issue 詢問 2.0 版本是否會發布，什麼時候發佈，官網都沒有迴應，似乎 Quill 真的“死了”。

我從2019年開始接觸 Quill，當時的 Quill 是最受歡迎的開源富文本之一，我也基於 Quill 打造了一款更加實用、功能更加豐富的富文本組件 EditorX，並被應用於華為內部眾多業務，並沉澱了《深入淺出 Quill》系列文章7篇。

這5年來，我一直在期待 Quill 2.0 的發佈，上週看到 Quill 2.0 終於發佈了，心情非常激動，於是立馬升級體驗了下，接下來我就帶大家一起看看 Quill 2.0 有哪些重大更新。

支持表格操作

從功能上來説，我覺得最大的變化就是支持表格的操作，1.0 版本是不包含表格功能的。

2.0 增加了一個 table 的 module 和 format，但目前還比較簡單，只能通過調用 API 的方式操作表格，還沒有操作表格的 UI，比如：在工具欄點擊表格圖標，只能插入一個一行一列的表格，沒法直接在界面操作，比如插入行列等。

const quill = new Quill('#editor', {
  theme: 'snow',
  toolbar: [
    [{ header: ['1', '2', '3', false ] }],
    ['bold', 'italic', 'underline', 'link'],
    [{ list: 'ordered' }, { list: 'bullet' }],
    ['clean'],
    ['table'] // 在工具欄中增加表格格式
  ]
})

效果如下：

quill-2.0-1.png

如果是 1.x 版本，以上代碼是沒法在工具欄顯示錶格圖標的，並且在瀏覽器控制枱會提示：不存在的表格格式

quill-2.0-2.png

這個表格功能還是太簡陋，沒法真正在項目中用起來，我早在 2019 年基於 Quill 和 QuillBetterTable 做了一個表格效果，當時是基於 2.0.0-dev.3 版本的 Quill。

支持了以下特性：

在工具欄插入指定行列的表格
表格行高、列寬拖拽
右鍵菜單工具欄操作：插入行/列、刪除行/列、合併/拆分單元格等

在工具欄插入指定行列的表格：

quill-2.0-3.png

富文本中的表格操作效果：

quill-2.0-4.png

支持 TypeScript

從工程結構來看，最大的兩個變化就是從 JavaScript 改造成了 TypeScript，項目組織方式改成了 Monorepo 方式。

更好的類型檢驗和錯誤提示，不僅提升了開發效率，而且增加了 DX 開發者體驗，看來 TypeScript 和 Monorepo 依然是大趨所勢！

quill-2.0-5.png

另外單元測試也由 WebdriverIO 遷移到 Vitest，E2E測試則由 Karma 遷移到了 Playwright。

看着這個技術棧，覺得非常熟悉，和我們的 TinyVue 跨端跨框架組件庫基本是一樣的。

支持多 Quill 實例

隨着 Quill 的普及和使用頻率的增加，越來越多開發者希望在同一頁面使用多個 Quill。

例如，博客產品可能會使用 Quill 來為帖子本身提供功能齊全的編輯界面，包括標題、圖像和代碼塊，而在同一頁面上，Quill 還以僅支持粗體、斜體和鏈接格式的方式為評論輸入提供能力。

Quill 2.0 的新註冊表功能支持這種場景，允許在同一頁面上共存多個具有各自格式配置的編輯器，而不會發生任何衝突。

在 Quill 的文檔中瞭解更多關於註冊表的信息：Registries

性能提升

Quill 2.0 包含許多性能優化，其中最重要的是提高了大內容的渲染速度。

增加 insertBefore 函數，並通過儘可能使用 insertBefore，提高了 setContents 的性能
通過優化 getRange 函數，提升了同時渲染多個 Quill 實例的性能，在一個頁面中同時渲染4000個Quill實例，優化後的渲染性能提升近10倍
優化 Quill 實例初始化邏輯，當內容為空時，無需執行 setContents 函數

渲染4000個Quill實例，優化前後加載時間對比：

quill-2.0-6.png

關於 Quill 2.0 的更多更新，請參考 Quill 官網文檔和博客文章：

Announcing Quill 2.0
Upgrading to 2.0
Release Notes: Version 2.0.0

歡迎關注《深入淺出 Quill》系列文章

之前寫過一個 Quill 系列文章，從使用到原理，再到實踐，以及富文本編輯器的選型。

由於 Quill 很久沒更新，我覺得也沒必要更新了，現在 Quill 2.0 發佈，又給了我繼續更新下去的動力，歡迎朋友們持續關注深入淺出 Quill 系列文章，我將帶你解鎖更多 Quill 的玩法，並深入剖析 Quill 的實現原理，瞭解這款重新坐上開源富文本編輯器“鐵王座”的 Quill，究竟有什麼獨特之處，能受到這麼多開發者們的喜愛。