contenteditable="true" ctrl_enter，shift+enter-->换行，监听粘贴事件实现粘贴去掉文本样式

html :

script:

```

eventListen(event) {                 let allowKey = [8, 13, 37, 38, 39, 40]; // 上下左右回车删除                 if (event.keyCode === 13&& !(event.shiftKey)) {                     event.preventDefault();                     return false;                 }                  // shift+回车-->换行                 if (event.shiftKey && event.keyCode == 13) {                     this.contenteditableDivRange()                     return false;                 }                 },
            contenteditableDivRange(){             var docFragment = document.createDocumentFragment();             //add the br, or p, or something else             var newEle = document.createElement('br');             docFragment.appendChild(newEle);
            //make the br replace selection             var range = window.getSelection().getRangeAt(0);             range.deleteContents();//从文档中移除 Range 包含的内容             range.insertNode(docFragment);//在 Range 的起点处插入一个节点
            //create a new range             range = document.createRange();             range.setStartAfter(newEle);//以其它节点为基准，设置 Range 的起点             range.collapse(true);//将 Range 折叠至其端点之一
            //make the cursor there             var sel = window.getSelection();             sel.removeAllRanges();//将所有的区域都从选区中移除             sel.addRange(range);//一个区域（Range）对象将被加入选区             },

```

监听粘贴，去掉复制文本的样式，放过图片

  mounted() {             let target=document.getElementById("inputArea")             target.addEventListener('paste',(event)=>{                 this.textPaste(event)             }) } //处理粘贴             textPaste(event){                 event.preventDefault()                 let newText                 // let newHtml                 let clp=(event.originalEvent||event).clipboardData                 //兼容针对opera ie等浏览器                 if(clp=== undefined||clp===null){                     newText=window.clipboardData.getData("text")||""                     if(newText!==""){                         if(window.getSelection){                             //针对IE11 10 9 safari                             let  newNode=document.createElement("span")                             newNode.innerHTML=newText                             window.getSelection().getRangeAt(0).insertNode(newNode)                         }else{                             //兼容ie 10 9 8 7 6 5                             document.selection.createRange().past                         }                     }                 }else{                     // 兼容chrome或hotfire                     newText=clp.getData('text/plain')||""                     let file = clp.items&&clp.items[0];                     // newHtml=clp.getData('text/html')||""                     if(newText!==""){                         document.execCommand('insertText',false,newText)                     }else if (file && /image\/\w+/i.test(file.type)) {                      // 类型为图片, 并且文件大小不为 0                      this.imgReader(file)                     }                    }             },                  imgReader(item){                 var blob = item.getAsFile(),                         reader = new FileReader();
                    reader.onload = function(e) {                         var img = new Image();
                        img.src = e.target.result;                         console.log('e', e)                         document.getElementById("inputArea").appendChild(img);                     };                     reader.readAsDataURL(blob);             }

contenteditable="true" ctrl_enter，shift+enter-->换行，监听粘贴事件实现粘贴去掉文本样式

相关

标签