Day 10：編輯內容的呈現 - Parchment 與 Blot
今天我們將一同探討 Quill 背後的兩個關鍵概念：Blot 和 Parchment。雖然這些名詞可能聽起來有些陌生，但它們在 Quill 的運作中扮演了重要的角色。讓我們來了解一下，究竟 Blot 和 Parchment 是什麼，以及它們如何影響著 Quill 的編輯內容。 什麼是 Parchment？Parchment 是 Quill 的文件模型，它是與 DOM (Document Object Model) 並行的樹狀結構，並提供了對內容編輯（例如 Quill）的功能。一個 Parchment 樹是由多個 Blot 組成的，這些 Blot 會反射對應的 DOM 節點。Blot 如同剛才提到的，它可以提供結構、格式與內容。換句話說，它們扮演著為文件元素提供實質性、樣式和功能的角色。除了 Blot 之外，..
Read moreDay 9：Quill Editor 的資料物件 - Delta (下)
昨天探討了 Delta，初步有了一些概念，今天就來嘗試練習看看，為了方便查看，先新增一個 quill-editor.service，並將 Delta 相關的練習內容都放到這裡面。 使用 new Delta() 操作在上一篇文章中，官方不建議手動建立 Delta 物件，應該要透過可連結 Deltas 物件的方法像是：insert()、delete()，和 keep() 等方法來建立新的 Delta。 因此使用的操作方式會是每次都直接 new 一個 Delta，並把要進行的文本操作透過鏈式呼叫(Method Chaining) 的方式處理，最後再呼叫 quill.updateContents 方法並帶入新增的 helloWorldDelta： const helloWorldDelta = new Delta(..
Read moreDay 8：Quill Editor 的資料物件 - Delta (上)
今天初步探討 Quill Editor 資料物件之一，Delta，就一起來了解一下吧。 什麼是 Delta 物件？不要被 Delta 這酷酷的名字給嚇到，它其實是很單純的東西。 首先我們將官網文件的描述翻譯來看： Delta 是一種簡單但富有表現力的格式，可用於描述 Quill 的內容和變化。這個格式是 JSON 的嚴格子集，可讀性高，並且機器也能容易解析。Delta 可以描述任何 Quill 文件，包含所有文字和格式資訊，並去除 HTML 的歧義與複雜性。 Delta 是 Quill Editor 使用的資料物件，它同時也作為獨立的儲存庫，使 Delta 可以在 Quill 外的情境中被使用。主要用途在處理操作轉換（Operational Transform），並且可以套用到即時協同編輯的應用，像 G..
Read moreDay 7：Quill Editor 擴充自訂功能
Quill 作為編輯器的核心優勢在於它提供了豐富的 API 與容易實現客製化的功能。當我們基於 Quill 的 API 實作功能時，可以包成一個 module 較方便使用。今天一起探討如何擴充 Quill 編輯器的功能，讓我們可以依照特定的需求實現並加入，使編輯器的功能更豐富以貼近專案的特殊需求。 註冊 Quill 自訂模組假設我們需要新增一個能顯示編輯器當前字數的計數器，首先需要建立一個名為 counter 的 module： // 建立自訂 Module createCustomModule() { Quill.register( 'modules/counter', // 自訂 module 名稱 function (quill: Quill..
Read more
Day 6：Quill Editor 自訂工具列
昨天我們知道如何設定編輯器的 CSS 樣式，並且修改既有的功能按鈕。今天接著研究要如何自訂工具列的內容以及加入自訂功能的按鈕。 自訂工具列：Toolbar OptionsQuill Editor 的工具列有兩種設置方式，一種是定義 toolbarOption 物件，由於 Quill 內建相當豐富實用的功能，因此我們可以直接以陣列的方式設定想要加入的控制按鈕，陣列底下的每個元素也是陣列，用來表示一個群組，除了可以調整工具列的功能按鈕順序之外，我們也能以分組的方式將同類型的功能擺在一起。 const toolbarOptions = { container: [ ['bold', 'italic', 'underline', &#..
Read more