這是一個系列部落格，最終目的是要做一個基於 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時，選中全部文字。