從零開始,開發一個 Web Office 套件(13):刪除、替換已選中文字

趙康發表於2022-03-28

這是一個系列部落格,最終目的是要做一個基於 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 演算法

當我們按下按鍵時,首先判斷下是否有選中文字:

  1. 如果此前已經選中了文字,則:
    1. 刪除選中文字
    2. 如果按下的是'Backspace'鍵,將游標移動到刪除位置
    3. 如果按下的是'Enter'鍵,將本段落從刪除位置截斷為兩段,將游標移動到下一段開頭處
    4. 如果輸入的是普通文字(無論是否正在使用輸入法),從刪除位置插入文字
  2. 如果此前沒有選中文字,且游標是可見的,則直接進入前文已實現的插入/刪除文字邏輯

2.26.2 實現

呼叫演算法:

實現演算法:

2.26.3 效果

刪除已選中文字:

替換已選中文字:

(未完待續)

相關文章