<divclass="contain":style="{height:editableHeight+'px'}" v-html="innerText" ref="editableDiv" contenteditable="true" :placeholder=placeholder @input="inputTe

出现这个问题原因：（1）通过打断点可以看到，当你输入的时候触发input事件，提交值给父组件中的v-model；（2）但因为在子组件中又监听了v-model的值，所以整体形成了闭环；（3）还需要重点说明的是光标问题，contenteditable与v-html所在的元素值的改变如果不是通过输入而是通过赋值实现，光标就会跑到最

实现可文字编辑也可插入节点的功能展示如下：html5中contentEditable属性规定是否可编辑元素的内容，给需要编辑的节点添加contentEditable="true"。兼容性：当点击Button时在编辑框内增加节点：一开始div中加的span标签，发现有几个缺陷：点删除键时span不会删除整个，而是一个一个删除span里的

 $("#Content").focus();//创建img元素varimg=document.createElement('img');img.src='xxxx';img.style.display='block';//插入img元素if(window.getSelection){vareditableDiv=document.getEle

换行后生成div，设置的样式没有生效 ***原因style标签上设置了scoped解决办法1、去掉style的scoped属性2、额外写一个style，不加scoped（vue支持多个style）<divclass="mainText-body"contenteditable="true"></div><stylelang="less"scoped>//删除

this.$refs.materialTxt.addEventListener('paste',function(e){console.log('监听到了')e.stopPropagation()e.preventDefault()lettext='';constevent=(e.originalEvent||e)if(event.c

1. contentEditable富文本，没有onchange事件，有oninput事件，但是遇见中文输入法时，会触发多次，而我们只想输入结束时触发。那我们需要用到compositionstart和compositionend事

<divclass="content-container"ref="contentContainer"><divv-if="flag"ref="ContentEditable"><divv-for="(item,index)indata":key="index"class=

1、添加contenteditable属性让文本处于可编辑状态，contenteditable:"inherit";(默认)contenteditable:"plaintext-only";(输入纯文本)contenteditable:"true";contented