解决富文本编辑器wangeditor 光标跳动的问题

为什么会出现光标总是跳动到末尾的情况??

通常我们会将编辑器封装为一个组件来使用,编辑的内容就是通过父组件传递给子组件,每次编辑父组件中的内容都会触发子组件(编译器)中的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);
};

如有问题,欢迎留言!!

你可能感兴趣的:(wangeditor,vue,vue.js,前端)