富文本编辑器wangEditor回显问题

野性酷女 2023-10-11 18:32 24阅读 0赞

*  回显时渲染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，然后将控制是否隐藏显示标识在最外层，这样每次弹窗都是新创建和销毁组件，可解决缓存问题。

发表评论取消回复

表情：

评论列表（有 0 条评论，24人围观）

还没有评论，来说两句吧...

相关阅读

相关富文本编辑器wangEditor回显问题

回显时渲染dom报错问题：富文本编辑器在回显html时偶尔会报以下错误： Error in v-on handler: "Error: Cannot find a

野性酷女/ 2023年10月11日 18:32/ 0 赞/ 25 阅读

相关 Vue使用富文本编辑器wangEditor(详细)

基于Vue2项目配置 npm 安装 wangeditor依赖 yarn add @wangeditor/editor-for-vue 或者 np

青旅半醒/ 2023年10月11日 18:30/ 0 赞/ 54 阅读

相关在vue中使用wangEditor富文本编辑器

目录 wangEditor编辑器 Vue基本配置项 1.安装wangEditor 2.创建公共组件 3. 编译器组件内容代码效果图 5.对应官方文档介绍位置

﹏ヽ暗。殇╰゛Y/ 2023年01月03日 11:25/ 0 赞/ 228 阅读

相关 layui中使用wangEditor富文本编辑器

<script type="text/javascript" src="https://unpkg.com/wangeditor/dist/wangEditor.min

た入场券/ 2022年12月21日 00:59/ 0 赞/ 264 阅读

相关富文本编辑器wangEditor

目录下载引入基本使用说明 wangEditor是一个轻量级的富文本编辑器，相比KindE

向右看齐/ 2022年12月11日 06:25/ 0 赞/ 743 阅读

相关使用wangEditor富文本编辑器遇到的问题总结

怎么使用和安装我就不详细说了，文档写得很清楚，[https://www.kancloud.cn/wangfupeng/wangeditor3/332599][https_www

淩亂°似流年/ 2022年04月12日 04:40/ 0 赞/ 2265 阅读

相关 HTML富文本编辑器wangEditor的使用

文章目录官网项目结构源码全屏插件 CSS JS 效果

叁歲伎倆/ 2022年04月03日 05:45/ 0 赞/ 492 阅读

相关 wangEditor 轻量级 web 富文本编辑器

【介绍】 wangEditor 是基于javascript和css开发的 Web富文本编辑器，轻量、简洁、易用、开源免费。 ![watermark_type_ZmFu

不念不忘少年蓝@/ 2022年03月24日 15:24/ 0 赞/ 546 阅读

相关 layui富文本编辑器添加图片回显问题详解

最近写项目中需要用到LayUI富文本编辑器，其他地方都挺好，唯独上传图片时，要不就是上传完成后回显404，要不就是访问时404（访问时我是新打开的一个页面），返回路径一直有问题

青旅半醒/ 2022年02月16日 02:22/ 0 赞/ 489 阅读

相关 Vue中使用wangEditor富文本编辑器

> 本文章向大家介绍Vue中使用wangEditor富文本编辑器，主要包括Vue中使用wangEditor富文本编辑器使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定

曾经终败给现在/ 2021年07月26日 11:38/ 0 赞/ 697 阅读