从零开始,开发一个 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.

参考资料:

可以使用剪贴板 Clipboard API 异步读写系统剪贴板:

参考资料:

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 效果

复制:

粘贴:

剪切:

全选:

(未完待续)