chrome下的自定义的复制、剪切、粘贴、撤销、重做功能

chrome下的自定义的复制、剪切、粘贴、撤销、重做功能

最近做了一个复制剪切粘贴撤销重做功能，即提供一行工具栏，工具栏里有上述按钮，供用户操作使用。在做的过程中也是发现了一下问题：
先来看一下execCommand的兼容性问题

1.剪切document.execCommand(‘cut’)、复制document.execCommand(‘copy’)、撤销document.execCommand(‘undo’)、重做document.execCommand(‘redo’)在chrome下支持性还是挺好的，即使是在XP系统下支持的chrome49版本也都支持上述操作
2.粘贴document.execCommand(‘paste’)由于安全性等原因，无法执行，只能转换思路，想办法读取到剪贴板的内容，再利用Selection，将获取的内容插入到光标位置，但是这里有个问题，用代码控制粘贴行为后，撤销与重做功能会收到影响（只识别用户通过鼠标右键或键盘快捷键这种主动行为粘贴的内容，不会识别通过Selection执行粘贴动作的行为）
3.如何读取剪贴板的内容？

navigator.clipboard.readText().then(
    clipText => {
      console.log(clipText)
    })

navigator.clipboard有兼容性问题, chrome只在版本66 +支持

readText()只支持在安全的上下文环境下读取剪贴板内容，即通过https或localhost访问。初次访问时会弹出一个权限框，以便获取继续访问的权限

更多有关clipboard的知识请看这里Navigator.clipboard