解决富文本编辑器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);
};

如有问题,欢迎留言!!

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值