這是一個系列部落格,最終目的是要做一個基於 HTML Canvas 的、類似於微軟 Office 的 Web Office 套件(包括:文件、表格、幻燈片……等等)。
部落格園:《從零開始, 開發一個 Web Office 套件》系列部落格目錄
富文字編輯器 Github repo 地址:https://github.com/zhaokang555/canvas-text-editor
富文字編輯器 線上 Demo:https://zhaokang555.github.io/canvas-text-editor/
2. 富文字編輯器(MVP)
2.24 Feature:刪除文字
2.24.1 演算法
- 監聽input元素的
compositionstart
和compositionend
事件。並記錄使用者狀態:是否正在使用輸入法 - 監聽input元素的
keydown
事件。當事件觸發:- 如果此時使用者沒有正在使用輸入法 & 使用者按下的是
Backspace
鍵:刪除游標前的一個字元 - 否則,不做任何操作
- 如果此時使用者沒有正在使用輸入法 & 使用者按下的是
- 當要刪除游標前的一個字元時:
- 如果游標處於不顯示狀態,不做任何操作
- 如果游標處於所有字元的前面,不做任何操作
- 如果游標處於當前段落的開頭,將當前段落和上一個段落合併,並將游標挪動到合併處
- 否則,刪除游標前一個字元,後面字元補位,並將游標挪動到前一個位置
參考文件:
KeyboardEvent.key
: https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/keycompositionstart
:https://developer.mozilla.org/zh-CN/docs/Web/API/Element/compositionstart_eventcompositionend
: https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event
2.24.2 實現
實現演算法的同時,我們對程式碼進行一些重構:
- 簡化邏輯:使用一個狀態
store.charUnderCursor
(游標所處的字元) 替代store.cursorIdxInChars
,store.curParaIdx
,store.cursorIdxInCurPara
這3個狀態所起到的作用 - 減少狀態:使用
store.getPrevCharInSoftLine(char: Char)
替代shar.prev
指標所起到的作用 - 修改分段邏輯:使用
new Char('\n', ...)
進行分段
呼叫演算法:
實現演算法&重構:
2.24.3 效果
刪除:
刪除with中文輸入法:
2.25 Feature:回車換行
2.25.1 演算法
監聽keydown事件,當使用者按下'Enter'鍵時:
- 如果使用者正在使用輸入法,不做任何操作。程式後續會進入處理中文輸入法的邏輯:將輸入法中的原始英文字元上屏。
- 如果使用者沒有正在使用輸入法:
- 如果游標在所有文字末尾,追加新的一個段落。
- 如果游標在文字中間(即游標前後都有字元),在游標處將本段落截斷,拆分成兩個段落。
- 將游標移到下一段開頭的位置。
2.25.2 實現
直接呼叫我們上一小節重構好的store.insertChar(char)
就可以:
2.25.3 效果
(未完待續)