你知道的越多，你不知道的越多
点赞再看，手留余香，与有荣焉
封装组件
<template>
<div>
<div id="editor" ref="editorRef" class="editor" @input="change"></div>
</div>
</template>
<script>
import E from 'wangeditor';
export default {
name: 'Editor',
// eslint-disable-next-line vue/require-prop-types
props: ['value'],
mounted() {
this.initEditor()
},
methods:{
initEditor () {
// 创建一个editor实例，并将它挂载到，上面的div上，这样这个div就变成了富文本编辑器
const editor = new E(this.$refs.editorRef);
editor.config.menus = [
'undo',
'redo',
'head',
'bold',
'fontSize',
'fontName',
'italic',
'underline',
'strikeThrough',
'indent',
'lineHeight',
'foreColor',
'backColor',
'link',
'list',
'todo',
'justify',
'quote',
'table',
'code',
'splitLine',
];
editor.create()
// 将父组件中v-model所绑定的变量传递给value，再将value赋值给编辑器的内容。
editor.txt.html(this.value)
// 监听value，因为数据流是向下的传递的，父组件v-model绑定的属性一变化，那么value就会变化，从而获取到最新的值，更新编辑器中的内容。
this.$watch('value', () => {
editor.txt.html(this.value)
})
},
change (e) {
// v-model 指令是会给此节点添加一个input事件，我们在给富文本编辑器添加一个input事件，这么做在于，当输入内容后会获取到最新的内容，通过$emit 触发 父组件v-model所添加的input事件并将最新的内容传递过去，传递过去的值默认就会赋给v-model所绑定的属性。
this.$emit('input', e.target.innerHTML)
}
}
}
</script>
父组件
import editorBar from './editor.vue';
components: {
editorBar,
},
<el-row>
<el-col :span="24">
<el-form-item label="内容">
<editor-bar v-model="form.content"></editor-bar>
</el-form-item>
</el-col>
</el-row>
