iT邦幫忙

2023 iThome 鐵人賽

DAY 23
0
Modern Web

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

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

  • 分享至 

  • xImage
  •  

昨天泡了溫泉,休息一下,繼續看 History module。
History module 主要保存文本操作紀錄與處理與 Quill 的 undo 和 redo。
有以下的選項可以使用:

配置設定參數

delay

預設值:1000

設定在指定秒數內更改合併成一個更改紀錄。例如當 delay 設為 0 時,幾乎每個字元都會記錄成一次更改,因此使用 undo 就只會取消一個字元。當 delay 設置為 1000 時,undo 將會撤銷最後 1000 毫秒內發生的所有變更。

maxStack

預設值:100

設定歷史操作紀錄堆疊的最大值。與 delay 選項合併的變更算是一次變更操作。

userOnly

預設值:false

預設的情況下,無論 sourceuser 或是透過 api 的方式進行的所有變更。都視為同等的操作,並且變更可以從 history redo/undo。如果 userOnly 設為 true,則只會處理使用者的變更。

const quill = new Quill('#editor', {
  modules: {
    history: {
      delay: 2000,
      maxStack: 500,
      userOnly: true
    }
  },
  theme: 'snow'
});

API

clear

清除 history 的所有堆疊紀錄

方法:

clear()

範例:

quill.history.clear();

cutoff (實驗性)

通常短時間內連續進行的變更,我們可以透過 delay 設置來合併成為一次歷史紀錄,以便觸發更多的 undo 的變更。使用 cutoff 將重置合併窗口,以便呼叫 cutoff 之前和之後的更改不會被合併。

方法:

cutoff()

範例:

quill.history.cutoff();

undo

取消最後一次的變更操作。

方法:

undo()

範例:

quill.history.undo();

redo

如果上次的操作是 undo,則還原 undo

方法:

redo()

範例:

quill.history.redo();

小結

今天嘗試了初始化的時候加入 History module 的配置設定參數,另外也透過按鈕的方式來呼叫 history module 的 API,也能觀察到其 history stack 的變化,不過目前 @types/quill 的 history 版本似乎沒看到有 history module 的其他屬性,只有加上 API 的定義而已,感覺可以再提一個新 PR 了 XD

雜記

昨天運氣不錯,搭客運回宜蘭牽車沒遇到塞車,順利的開車到新竹接朋友出發到宜蘭,這聽起來有點瘋狂,我只是喜歡開車而已XD 不過到了住宿的停車場,因為是機械式的,沒注意到後面兩側還有塗上黃色的支撐桿,今天早上出發前才看到右後輪拱有擦到 Orz 前一晚停車時原本以為是機械車位的地板阻尼之類的作動聲,沒想到是磨擦聲,儘管是老車了,也多少有一些擦傷,但還是免不了會心痛 QQ,找時間再去買幾支板金補漆筆塗一下了,畢竟輪拱最邊緣的地方有一小部分都看到銀色的部分,應該是底漆也有刮掉了 (哭

Reference


上一篇
Day 22:讀 Quill Editor API 技術文件 - Keyboard Module (下)
下一篇
Day 24:讀 Quill Editor API 技術文件 - Clipboard 與 Syntax Highlighter Module
系列文
Angular + Quill: 文字編輯的強化之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言