同一页面使用多个WangEditor组件时,编辑过程编辑完后,光标会自动移动到内容末尾。原因是组件中watch同时触发导致光标移动到末尾。
解决方法:
找到template\admin\src\components\wangEditor\index.vue文件,在props中添加isChange属性
props: {
content: {
type: String,
default: '',
},
isChange: {
type: Boolean,
default: false,
},
},
然后在watch监听中添加判断条件
watch: {
content(val) {
if(!this.isChange)
this.editor.txt.html(val);
},
},
最后在使用组件时添加isChange属性的传值
<FormItem v-show="formData.type === 4" label="使用说明">
<WangEditor style="width: 100%" :content="formData.contents" :isChange="isChangeContent" @editorContent="getEditorContent"></WangEditor>
</FormItem>
在修改其内容时,先把isChange给设置为true即可解决光标下移问题
getEditorContent(data) {
this.isChangeContent = true;
this.formData.contents = data;
},