從零開始，開發一個 Web Office 套件（14）：復制、粘貼、剪切、全選

這是一個系列博客，最終目的是要做一個基於 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.27 Feature：復制、粘貼文本

2.27.1 基本原理

在Mac上，當用戶按下command鍵時，KeyboardEvent.metaKey為true；在Windows上，當用戶按下ctrl鍵時，KeyboardEvent.ctrlKey為true.

參考資料：

• KeyboardEvent.metaKey：https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/metaKey
• KeyboardEvent.ctrlKey：https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/ctrlKey
• https://stackoverflow.com/questions/3902635/how-does-one-capture-a-macs-command-key-via-javascript

可以使用剪貼板 Clipboard API 異步讀寫系統剪貼板：

參考資料：

• Clipboard.writeText()：https://developer.mozilla.org/zh-CN/docs/Web/API/Clipboard/writeText
• Clipboard.readText()：https://developer.mozilla.org/zh-CN/docs/Web/API/Clipboard/readText

2.27.2 算法

• 當用戶按下command/ctrl + c時，檢測是否有選中文字：

  • 如果有選中文字，將選中文字復制到剪切板；
  • 如果沒有選中文字，不作任何操作。

• 當用戶按下command/ctrl + v時，如果剪貼板內字符串不是空字符串，將其拆分成多個字符，插入光標處，並匹配光標處文字樣式；

• 當用戶按下command/ctrl + x時，檢測是否有選中文字：

  • 如果有選中文字：
    • 將選中文字復制到剪切板；
    • 刪除選中文字。
  • 如果沒有選中文字，不作任何操作。

• 當用戶按下command/ctrl + a時，選中全部文字。

2.27.3 實現

實現的同時，我們順便修復下之前留下的一個bug：當我們將光標移動到所有文字的末尾或開頭時（store.moveCursorToEnd, store.moveCursorToStart），如果編輯器內沒有文字，需要將光標挪動到左上角。

調用算法：

實現算法：

2.27.4 效果

復制：

粘貼：

剪切：

全選：

（未完待續）