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