这是一个系列博客，最终目的是要做一个基于 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时，选中全部文字。