今天繼續配著烤肉和月餅來看 Editor 的部分。Editor API 比前面的操作簡單一些,主要用在判斷使用者的游標或焦點狀態,並提供啟用與禁用編輯功能。
blur
移除編輯器的 focus
狀態,從使用這的角度來看就是輸入文字的游標離開編輯器。
方法:
blur()
範例:
quill.blur();
enable
控制編輯器是否能讓使用者進行輸入。當編輯器在 disabled
狀態時,不影響 source
為 api
與 slient
的 API 呼叫。
方法:
enable(enabled: boolean = true)
範例:
quill.enable();
quill.enable(false); // 禁用使用者輸入
disable
將編輯器設為禁用編輯狀態,如同上面的範例所提到的,相當於 enable(false)
的意思。
focus
將焦點回到編輯器上,游標會停留在上一次離開 (blur
) 的地方。
方法:
focus()
範例:
quill.focus();
hasFocus
確認焦點是否在編輯器的輸入範圍,這邊需要留意的是焦點在 toolbar
或是 tooltip
時,都不算在編輯器。
方法:
hasFocus(): Boolean
範例:
quill.hasFocus();
update
同步檢查編輯器的使用者更新,並在發生修改時觸發事件。對於有協作需求要解決衝突時,需要最新的狀態下相當實用。Source
的來源可以是 user
,api
, 以及 silent
。
由於這主要是用於線上共筆時可能造成編輯衝突時,可以透過 update
方法來同步編輯器的狀態,因此這之後如果有機會再來嘗試看看。
方法:
update(source: String = 'user')
範例:
quill.update();
小結
稍微回顧一下今天研究 Editor 相關的 API:
- blur:移除編輯器的焦點狀態。
- enable:控制編輯器是否能讓使用者進行輸入,包括禁用使用者輸入。
- disable:相當於
enable(false)
,禁止使用者輸入。 - focus:將焦點回到編輯器上,游標停留在上次離開的地方。
- hasFocus:確認焦點是否在編輯器上。
- update:同步檢查編輯器的使用者更新並在修改時觸發事件。
除了update
的操作沒辦法立即呈現之外,大部分的 API 都還滿淺顯易懂的。
雜記
今天邊塞車邊寫文章,還好有弟弟幫忙開車,早上七點多有驚無險的避免了一場危險,前面的車子似乎快睡著了又沒有打開車道維持輔助,導致車子直接嚕到中央護欄,還好沒翻車,雖然沒看到左側的鈑金狀況,但應該是滿慘的。再次證明了保持車距的重要性。
Reference
文章同步發表於2023 iThome 鐵人賽