clipboardData 复制粘贴操作细则

最近公司在做客户端的项目，是一个客服系统，在开发过程中遇到了使用快捷键复制粘贴的内容有元素的样式问题，查阅了很多前人的博客，发现都是零零散散的，于是有了此文章的产生

关键词：【contenteditable】，【paste】

1. 可编辑文本的关键属性 【contenteditable】

<div id="messageEdit" contenteditable="true"  class="message"><br></div>

2. 如何解决上述的问题？
   通过对具体元素进行事件【parse】进行绑定，当用户在当前元素内操作时，就能监听到用户的粘贴操作。

$("#messageEdit").on("paste",  (event)=> {
      textPaste(event)
  });  
function textPaste(event){
    console.log(event)
    event.preventDefault();
        var text;
        var clp = (event.originalEvent || event).clipboardData;
        var type=clp.items[0].type;
        console.log(type)  // 可通过类型来进行粘贴文件的判断  【重点】
        //兼容针对于opera ie等浏览器
        if (clp === undefined || clp === null) {
            text = window.clipboardData.getData("text") || "";
            if (text !== "") {
                if (window.getSelection) {
                // 针对于ie11 10 9 safari
                    var newNode = document.createElement("span");
                    newNode.innerHTML = text; 
                  window.getSelection().getRangeAt(0).insertNode(newNode);
                } else {
                // 兼容ie10 9 8 7 6 5
                    document.selection.createRange().pasteHTML(text);
                }
            }
        } else {
        // insertHTML ,insertText 以及其他的事件，具体可参考相关文档
          if(type.match(/image/)){
            var blob = clp.items[0].getAsFile();
                var file = new FileReader();
                file.onload=function(){
                  console.log(file.result)
                  document.execCommand('insertHTML', false, `<img src="${file.result}"></img>`);
                }
                file.readAsDataURL(blob);
          }else{
            //兼容chorme或hotfire
            text = clp.getData('text/plain') || "";
            if (text !== "") {
                document.execCommand('insertText', false, text);
            }
          }
        }
  }

我这里对粘贴的内容进行了图片和文本的类型进行判断，并做了相关操作，最终能实现粘贴文字时不会有奇怪的样式，以及截图的黏贴操作。