iT邦幫忙

鐵人檔案

2023 iThome 鐵人賽
回列表
Modern Web

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

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

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

Day 21:讀 Quill Editor API 技術文件 - Keyboard Module (上)

今天來看 Keyboard module 的章節。 Keyboard module 支援特定 context 中鍵盤事件的自訂行為。Quill 使用 Keybo...

2023-10-06 ‧ 由 Jeff Wu 分享
DAY 22

Day 22:讀 Quill Editor API 技術文件 - Keyboard Module (下)

連假的第一天,今天繼續看 Keyboard module 的 context 剩下的參數以及設定相關的介紹。 offset 當使用者的游標從開始移動到 offs...

2023-10-07 ‧ 由 Jeff Wu 分享
DAY 23

Day 23:讀 Quill Editor API 技術文件 - History Module

昨天泡了溫泉,休息一下,繼續看 History module。History module 主要保存文本操作紀錄與處理與 Quill 的 undo 和 redo...

2023-10-08 ‧ 由 Jeff Wu 分享
DAY 24

Day 24:讀 Quill Editor API 技術文件 - Clipboard 與 Syntax Highlighter Module

連假第三天,終於來到最後的兩個章節,Clipboard & Syntax Highlighter Module。因為篇幅比較沒有那麼多,所以就放在一起看...

2023-10-09 ‧ 由 Jeff Wu 分享
DAY 25

Day 25:ngx-quill 介紹

前面 14 天都在看 Quill Editor 的官方文件,突然想起我的主題還是要跟 Angular 有一點關係,除了直接在 Angular 引入 Quill...

2023-10-10 ‧ 由 Jeff Wu 分享
DAY 26

Day 26:關於 Pachment 的 Attributors

之前有探討過 Parchment 與 Blot,而 Parchment 還有一個屬性器 (Atrributors),今天就來看一下關於 Attributor 的...

2023-10-11 ‧ 由 Jeff Wu 分享
DAY 27

Day 27:使用 Parchment 實現類似 Medium 的編輯器 - 準備工作

昨天透過 Parchement 新增了三種不同的 Attributor,今天來看要如何在編輯器上運用。官方文件介紹嘗試實現一個類似 Medium 的功能編輯器,...

2023-10-12 ‧ 由 Jeff Wu 分享
DAY 28

Day 28:使用 Parchment 實現類似 Medium 的編輯器 - Basic Formatting & myBlot

昨天我們新增了一個元件並初始化 Quill 的核心,今天繼續實現 Medium 編輯器的練習。 實作基礎格式 我們之前提到過,Inline 不貢獻任何格式。這是...

2023-10-13 ‧ 由 Jeff Wu 分享
DAY 29

Day 29:使用 Parchment 實現類似 Medium 的編輯器 - Dividers & Images

昨天體驗了基本的行內格式 Blot 以及區塊格式 Blot,今天繼續實現類似 Medium 編輯器的最後四個部分,分別為分隔線、圖片、影片、以及推文的自訂功能實...

2023-10-14 ‧ 由 Jeff Wu 分享
DAY 30

Day 30:使用 Parchment 實現類似 Medium 的編輯器 - Videos & Tweets

今天來到了挑戰的最後一天,接著把剩下的 Videos 和 Tweets 等自訂 Blot 體驗一遍。 Videos 我們將以和 images 的實現方式來實現...

2023-10-15 ‧ 由 Jeff Wu 分享