iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

Angular + Quill: 文字編輯的強化之路 系列

最近,我開始了新的職涯,再度投入 Angular 專案的懷抱。在這個過程中,我發現了許多我未曾接觸過的新技術,其中包括 Quill Editor 這個功能強大的文字編輯器。在許多 CMS 專案中,Quill Editor 佔有一席之地。因此,我想藉由參加這次的 IT 鐵人賽,給自己一個挑戰,從初探 Quill Editor 開始,逐步深入其精神,期望在這個過程中能夠慢慢挖掘並有豐富的收穫。

鐵人鍊成 | 共 30 篇文章 | 7 人訂閱 訂閱系列文 RSS系列文
DAY 11

Day 11:讀 Quill Editor API 技術文件 - Content (上)

今天開始來細看 Quill Editor 的技術文件,看看 Quill 有哪些方法可以使用。同時也準備了範例練習,實際呼叫並觀察也許會比較有感覺。這會是一段細節...

2023-09-26 ‧ 由 Jeff Wu 分享
DAY 12

Day 12:讀 Quill Editor API 技術文件 - Content (下)

今天就繼續來看 Content 相關的 API 後半段。 insertEmbed 將嵌入式內容插入編輯器,return 為更改後的 Delta 物件。sourc...

2023-09-27 ‧ 由 Jeff Wu 分享
DAY 13

Day 13:讀 Quill Editor API 技術文件 - Formatting

繼昨天的 Contents 相關的 API,今天來看看 Formatting 的部分。 format 根據使用者當前選擇的字串套用文字格式,回傳的 Delta...

2023-09-28 ‧ 由 Jeff Wu 分享
DAY 14

Day 14:讀 Quill Editor API 技術文件 - Selection

昨天研究並練習關於套用文本的行內與區塊樣式,初步把每個 API 的使用方式都看過一遍,今天輪到編輯器選取功能相關的 API,繼續給他看下去 XD getBoun...

2023-09-29 ‧ 由 Jeff Wu 分享
DAY 15

Day 15:讀 Quill Editor API 技術文件 - Editor

今天繼續配著烤肉和月餅來看 Editor 的部分。Editor API 比前面的操作簡單一些,主要用在判斷使用者的游標或焦點狀態,並提供啟用與禁用編輯功能。 b...

2023-09-30 ‧ 由 Jeff Wu 分享
DAY 16

Day 16:讀 Quill Editor API 技術文件 - Events

今天來看 Events 的部分,Event 的使用方式就和 JavaScript 的事件監聽一樣,透過指定的事件名稱來監聽,並執行指定的方法。 text-cha...

2023-10-01 ‧ 由 Jeff Wu 分享
DAY 17

Day 17:讀 Quill Editor API 技術文件 - Model

今天看 Quill Editor 的 Model 技術文件介紹,根據文件的描述,語意版本控制(Semantic Versioning)不適用於實驗性 API,意...

2023-10-02 ‧ 由 Jeff Wu 分享
DAY 18

Day 18:讀 Quill Editor API 技術文件 - Extension

今天接著看 Extension 的部分,顧名思義就是和擴充功能相關的 API 使用。 debug 提供除錯用的靜態方法,可以開啟指定層級的 log 訊息,例如:...

2023-10-03 ‧ 由 Jeff Wu 分享
DAY 19

Day 19:讀 Quill Editor API 技術文件 - Modules

明天北北基桃沒有放颱風假,大家上班注意安全。今天開始進到 Module 的章節。 Module 允許 Quill 的操作行為與功能實現客製化。有幾個官方支援的模...

2023-10-04 ‧ 由 Jeff Wu 分享
DAY 20

Day 20:讀 Quill Editor API 技術文件 - Toolbar Module

今天開始第一個內建 module 的介紹,在第六天的時候我們就已經介紹如何自訂工具列,這篇就當作複習,跟著技術文件介紹來練習體驗。 工具列模組 (Toolbar...

2023-10-05 ‧ 由 Jeff Wu 分享