富文本编辑器wangEditor回显问题

  • 回显时渲染dom报错问题:

富文本编辑器在回显html时偶尔会报以下错误:

Error in v-on handler: "Error: Cannot find a descendant at path [1,1,0] in node: {“children”:[],“operations”:[{“type”:“remove_node”,“path”:[0],“node”:

这个问题在github也提issues了,目前靠谱的解决方法为在关闭dialog时同时销毁富文本编辑器,让dialog与富文本编辑器同时v-if绑定同一个变量即可。

          <div v-if="dialogFormVisible" style="border: 1px solid #ccc;">
              <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :defaultConfig="toolbarConfig"
                :mode="mode"
              />
              <Editor
                style="height: 500px; overflow-y: hidden;"
                v-model="html"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="onCreated"
              />
            </div>
  • 添加时存在缓存,此时单单控制富文本的v-if无效,必须要连同dialog一起销毁,此时控制dialog显示的变量要放在组件上
 <add-or-update ref="addOrUpDataRef" @getList="getList" v-if="diaShow" @close="diaShow = false"/>

富文本存在于add-or-update组件中,如果在这个组件里用变量控制一个dialog就会出现上述问题,此时直接让dialog的visable为true,然后将控制是否隐藏显示标识在最外层,这样每次弹窗都是新创建和销毁组件,可解决缓存问题。

  • 8
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值