先看最终实现的demo效果图：

(1)上面看似文本域的大框是通过给div添加contenteditable=true属性实现的Vue组件DivEditable.vue；

(2)下面的输入框是父组件中与DivEditable绑定相同变量的输入框，用于展示数据的双向绑定效果；

(3)按钮实现绑定变量的赋值操作；

(4)DivEditable的blur事件可触发文本过滤或样式的变更等操作(专门留的组件接口)；

可以看到，DivEditable中值的改变会影响输入框中的值，同样的，输入框中值改变也会影响DivEditable中的值，通过按钮给绑定变量赋值同时触发了输入框及DivEditable中值的改变。

1、contenteditable属性

用于设置或返回元素的内容是否可编辑。:

疑问：这时你可以能会想，这么麻烦，怎么不直接使用可编辑元素？比如我们最常见的有input、textarea。

解答：但如果你想要在输入的内容中加入html代码，并且还要正常渲染，就要与v-html结合使用，所以我们只能采用不可编辑元素并为其添加contenteditable为true的属性。

2、怎么实现DivEditable数据的双向绑定

犯傻1：一开始我天真的以为v-html与v-model一样，变量赋值后自带双向绑定，=.=事实证明还是太嫩；

犯傻2：于是我想那我再加一个v-model不就完事儿了，结果证明还是太嫩，浏览器直接报错'v-model' directives aren't supported on

exportdefault{

name:'DivEditable',

props: {

value: {

type: String,default:''}

},

data() {return{

innerText:this.value,

isChange:true}

},

watch: {

value() {if(this.isChange) {this.innerText= this.value

}

}

},

methods: {

changeText() {this.$emit('input',this.$el.innerHTML)

},

blurFunc() {this.isChange= true

this.$emit('blurFunc')

}

}

}

.div-editable{width:100%;height:100%;overflow-y:auto;word-break:break-all;outline:none;user-select:text;white-space:pre-wrap;text-align:left;&[contenteditable=true]{

user-modify:read-write-plaintext-only;&:empty:before {

content: attr(placeholder);display:block;color:#ccc;

}}

}

重点说明一下isChange参数的作用：

你可以先尝试拿掉它以及相关逻辑，看看最终会出现什么效果(输入一个字母光标就跑到前面去了，并且输入不了中文)；

分析一下原因：

(1)通过打断点可以看到，当你输入的时候触发input事件，提交值给父组件中的v-model；

(2)但因为在子组件中又监听了v-model的值，所以整体形成了闭环；

(3)还需要重点说明的是光标问题，contenteditable与v-html所在的元素值的改变如果不是通过输入而是通过赋值实现，光标就会跑到最前面；

所以以输入中文为例，你刚打了一个字母，立马就触发了监听与变动，光标移到最前面，自然无法完成整个正常的输入。

解决办法：

只有当blur的时候再做赋值操作(isChange为true)，focus状态下不做赋值(isChange为false)；

至于初始为true的原因是在父组件中直接给绑定的变量赋值时子组件中还是需要触发赋值的(isChange为true)；

除此之外，我还为组件提供了一个blur事件的函数接口，你可以做一些数据的过滤或者样式的变更，例如我demo中要高亮标签。

3、父组件调用

直接上源码：

改变值