從零開始，開發一個 Web Office 套件（11）：支援中文輸入法（or 其它使用輸入法的語言）

這是一個系列部落格，最終目的是要做一個基於 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.23 Feature：通過中文輸入法，輸入中文

2.23.1 基本原理

輸入中文（或者其它需要輸入法的語言），跟輸入英文的不同之處在於：我們通過鍵盤輸入的文字，並不是直接顯示在input框裡。而是要通過輸入法進行對映、選擇，再填入input框裡。

這裡就牽扯到三個事件，我們可以看下MDN文件：

• compositionstart：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/compositionstart_event
• compositionupdate: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/compositionupdate_event
• compositionend: https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event

上面的文件裡還有demo可以玩兒，通過它可以更好地幫助我們理解這三個事件代表的含義：

同時，我們還需要了解下InputEvent的以下兩個屬性：

• InputEvent.isComposing: https://developer.mozilla.org/zh-CN/docs/Web/API/InputEvent/isComposing
• InputEvent.inputType: https://developer.mozilla.org/zh-CN/docs/Web/API/InputEvent/inputType

為了更形象地理解這兩個屬性，我做了一個小demo。對比了輸入英文和中文時，這些屬性的區別：

2.23.2 演算法

1. 在我們輸入中文過程中，需要在編輯器中插入一些特殊的臨時字元。我們稱之為TempCompositionChar
2. 每當我們按一次鍵盤：
   1. 清空上一次插入的所有TempCompositionChar
   2. 將游標相對字元的位置（cursorIdxInChars，cursorIdxInCurPara）回退
   3. 插入新的CompositionChars
3. 當我們的輸入法完成一次輸入，將文字填充入input框裡時（即：觸發compositionend事件時）：將TempCompositionChar固定下來，改為CompositionChar

2.23.3 實現

新建CompositionChar類:

在Store中新增如下方法：

• 插入單個字元
• 批量插入字元
• 清空所有臨時字元
• 固定所有臨時字元，將其轉化為CompositionChar

其中，char.moveCursorToMyRight是我們重構之後，從click回撥中抽象出來的函式：

在input事件回撥中，判斷輸入的是英文還是中文，然後呼叫相關邏輯：

2.23.4 效果

（未完待續）