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

html :

<div id="inputArea" ref="inputBox" class="input-box-style" contenteditable="true" tabindex="1" @keydown="eventListen"> </div>

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);

            }