Jeff Wu's Note

Archives · All

Home

About

Archives

15th 30 Days ChallengeQuill

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 more
15th 30 Days ChallengeQuill

Day 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 more
15th 30 Days ChallengeQuill

Day 8:Quill Editor 的資料物件 - Delta (上)

今天初步探討 Quill Editor 資料物件之一,Delta,就一起來了解一下吧。 什麼是 Delta 物件?不要被 Delta 這酷酷的名字給嚇到,它其實是很單純的東西。 首先我們將官網文件的描述翻譯來看: Delta 是一種簡單但富有表現力的格式,可用於描述 Quill 的內容和變化。這個格式是 JSON 的嚴格子集,可讀性高,並且機器也能容易解析。Delta 可以描述任何 Quill 文件,包含所有文字和格式資訊,並去除 HTML 的歧義與複雜性。 Delta 是 Quill Editor 使用的資料物件,它同時也作為獨立的儲存庫,使 Delta 可以在 Quill 外的情境中被使用。主要用途在處理操作轉換(Operational Transform),並且可以套用到即時協同編輯的應用,像 G..

Read more
15th 30 Days ChallengeQuill

Day 7:Quill Editor 擴充自訂功能

Quill 作為編輯器的核心優勢在於它提供了豐富的 API 與容易實現客製化的功能。當我們基於 Quill 的 API 實作功能時,可以包成一個 module 較方便使用。今天一起探討如何擴充 Quill 編輯器的功能,讓我們可以依照特定的需求實現並加入,使編輯器的功能更豐富以貼近專案的特殊需求。 註冊 Quill 自訂模組假設我們需要新增一個能顯示編輯器當前字數的計數器,首先需要建立一個名為 counter 的 module: // 建立自訂 Module createCustomModule() { Quill.register( 'modules/counter', // 自訂 module 名稱 function (quill: Quill..

Read more
loading..
15th 30 Days ChallengeQuill

Day 6:Quill Editor 自訂工具列

昨天我們知道如何設定編輯器的 CSS 樣式,並且修改既有的功能按鈕。今天接著研究要如何自訂工具列的內容以及加入自訂功能的按鈕。 自訂工具列:Toolbar OptionsQuill Editor 的工具列有兩種設置方式,一種是定義 toolbarOption 物件,由於 Quill 內建相當豐富實用的功能,因此我們可以直接以陣列的方式設定想要加入的控制按鈕,陣列底下的每個元素也是陣列,用來表示一個群組,除了可以調整工具列的功能按鈕順序之外,我們也能以分組的方式將同類型的功能擺在一起。 const toolbarOptions = { container: [ ['bold', 'italic', 'underline', &#..

Read more
13456715