重回鐵王座！時隔5年！Quill 2.0 終於釋出啦🎉

Kagol發表於2024-04-25
UI

你好，我是 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'] // 在工具欄中增加表格格式
  ]
})

效果如下：

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

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

支援了以下特性：

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

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

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

支援 TypeScript

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

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

另外單元測試也由 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 的更多更新，請參考 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，究竟有什麼獨特之處，能受到這麼多開發者們的喜愛。

  • Quill 基本使用和配置
  • 透過 Quill API 實現對內容的完全控制
  • 👍 Quill 模組化機制
  • 👍 Quill 內容渲染機制
  • 在富文字編輯器中插入一條中國龍
  • 在富文字編輯器中玩貪吃蛇遊戲
  • 👍 Quill 富文字編輯器的實踐

感興趣的朋友也可以關注下我的微信公眾號：前端開源星球和個人部落格。

聯絡我們

公眾號：OpenTiny

GitHub：https://github.com/opentiny/tiny-vue（歡迎 Star ⭐）

官網：https://opentiny.design/tiny-vue

B站：https://space.bilibili.com/15284299

個人部落格：https://kagol.github.io/blogs

相關文章