今天來到了挑戰的最後一天，接著把剩下的 Videos 和 Tweets 等自訂 Blot 體驗一遍。 Videos 我們將以和 images 的實現方式來實現...
昨天體驗了基本的行內格式 Blot 以及區塊格式 Blot，今天繼續實現類似 Medium 編輯器的最後四個部分，分別為分隔線、圖片、影片、以及推文的自訂功能實...
昨天我們新增了一個元件並初始化 Quill 的核心，今天繼續實現 Medium 編輯器的練習。 實作基礎格式 我們之前提到過，Inline 不貢獻任何格式。這是...
昨天透過 Parchement 新增了三種不同的 Attributor，今天來看要如何在編輯器上運用。官方文件介紹嘗試實現一個類似 Medium 的功能編輯器，...
之前有探討過 Parchment 與 Blot，而 Parchment 還有一個屬性器 (Atrributors)，今天就來看一下關於 Attributor 的...
前面 14 天都在看 Quill Editor 的官方文件，突然想起我的主題還是要跟 Angular 有一點關係，除了直接在 Angular 引入 Quill...
連假第三天，終於來到最後的兩個章節，Clipboard & Syntax Highlighter Module。因為篇幅比較沒有那麼多，所以就放在一起看...
昨天泡了溫泉，休息一下，繼續看 History module。History module 主要保存文本操作紀錄與處理與 Quill 的 undo 和 redo...
連假的第一天，今天繼續看 Keyboard module 的 context 剩下的參數以及設定相關的介紹。 offset 當使用者的游標從開始移動到 offs...
今天來看 Keyboard module 的章節。 Keyboard module 支援特定 context 中鍵盤事件的自訂行為。Quill 使用 Keybo...
今天開始第一個內建 module 的介紹，在第六天的時候我們就已經介紹如何自訂工具列，這篇就當作複習，跟著技術文件介紹來練習體驗。 工具列模組 (Toolbar...
明天北北基桃沒有放颱風假，大家上班注意安全。今天開始進到 Module 的章節。 Module 允許 Quill 的操作行為與功能實現客製化。有幾個官方支援的模...
今天接著看 Extension 的部分，顧名思義就是和擴充功能相關的 API 使用。 debug 提供除錯用的靜態方法，可以開啟指定層級的 log 訊息，例如：...
今天看 Quill Editor 的 Model 技術文件介紹，根據文件的描述，語意版本控制（Semantic Versioning）不適用於實驗性 API，意...
今天來看 Events 的部分，Event 的使用方式就和 JavaScript 的事件監聽一樣，透過指定的事件名稱來監聽，並執行指定的方法。 text-cha...
今天繼續配著烤肉和月餅來看 Editor 的部分。Editor API 比前面的操作簡單一些，主要用在判斷使用者的游標或焦點狀態，並提供啟用與禁用編輯功能。 b...
昨天研究並練習關於套用文本的行內與區塊樣式，初步把每個 API 的使用方式都看過一遍，今天輪到編輯器選取功能相關的 API，繼續給他看下去 XD getBoun...
繼昨天的 Contents 相關的 API，今天來看看 Formatting 的部分。 format 根據使用者當前選擇的字串套用文字格式，回傳的 Delta...
今天就繼續來看 Content 相關的 API 後半段。 insertEmbed 將嵌入式內容插入編輯器，return 為更改後的 Delta 物件。sourc...
今天開始來細看 Quill Editor 的技術文件，看看 Quill 有哪些方法可以使用。同時也準備了範例練習，實際呼叫並觀察也許會比較有感覺。這會是一段細節...
今天我們將一同探討 Quill 背後的兩個關鍵概念：Blot 和 Parchment。雖然這些名詞可能聽起來有些陌生，但它們在 Quill 的運作中扮演了重要的...
昨天探討了 Delta，初步有了一些概念，今天就來嘗試練習看看，為了方便查看，先新增一個 quill-editor.service，並將 Delta 相關的練習...
今天初步探討 Quill Editor 資料物件之一，Delta，就一起來了解一下吧。 什麼是 Delta 物件？ 不要被 Delta 這酷酷的名字給嚇到，它其...
Quill 作為編輯器的核心優勢在於它提供了豐富的 API 與容易實現客製化的功能。當我們基於 Quill 的 API 實作功能時，可以包成一個 module...
昨天我們知道如何設定編輯器的 CSS 樣式，並且修改既有的功能按鈕。今天接著研究要如何自訂工具列的內容以及加入自訂功能的按鈕。 自訂工具列：Toolbar Op...
今天我們將著重於自訂 Quill Editor 的外觀與樣式，讓編輯器更符合專案的設計風格需求。Quill Editor 提供了幾種方法來調整外觀樣式，讓我們一...
在前一篇文章中，我們新增了 Angular 專案並安裝與配置了 Quill Editor，並建立了一個 "quill-editor" 元件。...
上一篇我們看了 Why Quill，今天就來複習環境設置，並嘗試新增一個 Angular 專案，不過如果你是被標題吸引進來的同學，多少都有接觸過 Angular...
建立內容 從網路誕生以來，建立內容一直是網路的核心。<textarea> 為大部分的網頁應用提供了原生且重要的解決方案，但有時候我們會需要為輸入的...
前言 最近開始新的職業生涯，重回 Angular 專案的懷抱，但也看到許多未曾接觸過的東西，例如 Quill Editor 這個編輯器，這裡面的東西非常的豐富...
Jeff Wu
iThome鐵人賽
看影片追技術