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),如果编辑器内没有文字,需要将光标挪动到左上角。

调用算法:
从零开始,开发一个 Web Office 套件(14):复制、粘贴、剪切、全选-LMLPHP

从零开始,开发一个 Web Office 套件(14):复制、粘贴、剪切、全选-LMLPHP

实现算法:
从零开始,开发一个 Web Office 套件(14):复制、粘贴、剪切、全选-LMLPHP

2.27.4 效果

复制:
从零开始,开发一个 Web Office 套件(14):复制、粘贴、剪切、全选-LMLPHP

粘贴:
从零开始,开发一个 Web Office 套件(14):复制、粘贴、剪切、全选-LMLPHP

剪切:
从零开始,开发一个 Web Office 套件(14):复制、粘贴、剪切、全选-LMLPHP

全选:
从零开始,开发一个 Web Office 套件(14):复制、粘贴、剪切、全选-LMLPHP

(未完待续)

03-30 18:04