为什么会出现光标总是跳动到末尾的情况??
通常我们会将编辑器封装为一个组件来使用,编辑的内容就是通过父组件传递给子组件,每次编辑父组件中的内容都会触发子组件(编译器)中的onchange事件,子组件再将新的改变后的值传递给父组件,父组件一接收到值光标就会自动跳转到内容末尾。
如何解决这种问题??
源头就是要解决onchange事件改变内容的时机,不能一在父组件写东西就触发,或者是触发之后在我们需要更新后的内容时再传递给父组件。
即在onchange事件中添加判断条件
以下代码的修改和添加都在这个示例https://blog.csdn.net/weixin_50606255/article/details/116800823
的基础上:
添加判断是否改变内容的变量 isChange,初始化为false
data() {
return {
editor: null,
editorContent: "",
imgList: [],
isChange:false, //定义判读是否改变的变量
};
},
watch: {
content:{
handler:function (newV,oldV) {
if(!this.isChange){
this.editor.txt.html(this.content);
}
this.isChange= false;
}
}
}
this.editor.config.onchange = (html) => {
this.isChange = true;
this.editorContent = html;
//触发父组件的方法,并传值
this.$emit("submitHandle", this.editorContent);
};
如有问题,欢迎留言!!