這是一個系列部落格,最終目的是要做一個基於 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.26 Feature:刪除、替換已選中文字
2.26.1 演算法
當我們按下按鍵時,首先判斷下是否有選中文字:
- 如果此前已經選中了文字,則:
- 刪除選中文字
- 如果按下的是'Backspace'鍵,將游標移動到刪除位置
- 如果按下的是'Enter'鍵,將本段落從刪除位置截斷為兩段,將游標移動到下一段開頭處
- 如果輸入的是普通文字(無論是否正在使用輸入法),從刪除位置插入文字
- 如果此前沒有選中文字,且游標是可見的,則直接進入前文已實現的插入/刪除文字邏輯
2.26.2 實現
呼叫演算法:
實現演算法:
2.26.3 效果
刪除已選中文字:
替換已選中文字:
(未完待續)