CRMEB中WangEditor组件同一页面多个使用时,光标自动后移问题解决

同一页面使用多个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;
},
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值