解决wangEditor使用keep-alive缓存后,调用editor.cmd.do()失败

前提:wangeditor版本:4.7.11     vue版本:vue2 

问题:在使用wangeditor富文本编辑器时,需求需要通过点击一个按钮,手动插入定义好的内容,所以使用了 editor.cmd.do('insertHTML', '....') 方法新增内容。但当页面使用keep-alive缓存后,切换到其他页面再切换回编辑器,此时直接调用手动插入内容,Console报错:Uncaught TypeError: Cannot read properties of undefined (reading 'parentNode')

解决

方式一:可以发现,如果手动点击编辑器,使光标置于编辑器内,再通过 editor.cmd.do() 方法插入内容是不会出错的,但尝试手动设置focus后并未解决问题。于是通过检测错误,提示用户手动确认插入位置,但因为错误发生在插入编辑器时,前置的一些请求等操作已经发生了,所以在这儿做一些额外的业务操作:比如调用接口删除数据库中刚刚未成功插入的内容等。

public activated() {window.addEventListener('error', this.watchErrorEvent);
}public deactivated() {window.removeEventListener('error', this.watchErrorEvent);
}public watchErrorEvent() {const msg = error.message;if(error.message.includes('Uncaught TypeError') &&error.message.includes(`'parentNode'`)) {this.$Message.info('请确认插入位置!');// 额外操作......}
}

方式二:方式一其实并未真正解决问题,现在从代码层面去分析和查找问题所在。

分析:

  1. 首先定位发生错误的代码:提示在geDom方法中的 var $parent = dom_core_1["default"]($node, parentNode) 出错,一顿操作后,好吧我没找出来原因。
  2. 那就直接查看 editor.cmd.do() 方法内部,通过debugger对比正常调用和调用出错的情况,发现selection._currentRange中的值不同。
  3. 查看selection的内容:查看源码 wangeditor/src/editor/selection.ts 中的 selection._currentRange,发现 _currentRange 是私有属性,并且在 saveRange(range?:Range) 方法中赋值的。
  4. 既然 _currentRange 是私有属性,我们就不好直接修改,而且用于赋值的range是通过Selection对象得到的range对象,那么猜测是选区出错,那有方式可以重新设置一下selection吗?发现 index.ts 中,有一个初始化选区的方法,查看调用的 initSelection() 方法的作用是 初始化编辑器选区,将光标定位到文档末尾。感觉就是它了!
  5. 在组件的activated函数中调用此方法,测试后发现未报错了,内容也成功插入。

最终代码:

public activated() {// this.editor = new Editor(...) 对象if(this.editor) {this.editor.initSelection();}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/689362.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

怎么将一张包含多个帧的精灵图分割成一帧一帧的小图

工具 图片分割 - 图文工具箱 - imgtool.net 设置行列 下载即可

烘干箱、烘烤箱或干燥箱的分类及使用方法

烘箱,又称烘干箱、烘烤箱或干燥箱,是一种专门设计用于通过加热手段使物品脱水、干燥、热处理或进行其他热反应的箱形设备。烘箱广泛应用于工业生产、科学研究、实验室分析、食品加工等多个领域,对于各种材料、零件、产品或食品的烘干、固化、…

实验室一块GPU都没有?这个云平台直接送4090免费无门槛代金券!

你有没有一些年代久远的老照片,或是网络下载的图片和视频,低分辨率、模糊还有噪点,如果能一键修复成高清就好了!现在在AI算法工程师圈子里很火的GpuMall智算云,上面的镜像可以一键帮你修复照片!比如我们用R…

Web界面加持!数据库备份神器,助你轻松备份数据!

使用这款带有Web界面的数据库备份神器,你可以轻松设置定时备份,确保数据安全无忧。备份结果即时通知,让你随时掌握备份状态。备份完成后,你将收到备份结果通知。无论是成功备份还是出现错误,你都能及时了解备份情况&am…

Ubuntu24安装搜狗输入法,修复闪屏问题

下载deb安装包:搜狗输入法linux-首页 安装:sudo dpkg -i 1.deb 搜狗输入法linux-安装指导 重启,但是完成后闪烁。按以下步骤更改桌面配置。 sudo gedit /etc/gdm3/custom.conf 取消WaylandEnable的注释即可

【how2j JQuery部分】课后题答案及相关笔记

练习题 <script src"jquery.min.js"></script><script>$(function(){$(tr:odd).css({"background-color":"#f8f8f8"});}); </script> <style> table{border-collapse:collapse;width:90%;} tr{border-bottom-sty…

c++ STL 之栈—— stack 详解

vector 是 stl 的一个关联容器,名叫“栈”&#xff0c;何为“栈”&#xff1f;其实就是一个数组&#xff0c;但有了数组何必还需栈&#xff0c;这是一个高深的问题。 一、简介 1. 定义 栈&#xff0c;是一个柔性数组&#xff08;可变长数组&#xff09;&#xff0c;可以变大变小…

即插即用篇 | YOLOv8引入轴向注意力 Axial Attention | 多维变换器中的轴向注意力

本改进已集成到 YOLOv8-Magic 框架。 我们提出了Axial Transformers,这是一个基于自注意力的自回归模型,用于图像和其他组织为高维张量的数据。现有的自回归模型要么因高维数据的计算资源需求过大而受到限制,要么为了减少资源需求而在分布表达性或实现的便捷性上做出妥协。相…

【C语言】/*操作符(下)*/

目录 一、操作符的分类 二、二进制和进制转换 2.1 进制 2.2 进制之间的转换 三、原码、反码、补码 四、单目操作符 五、逗号表达式 六、下标引用操作符[] 七、函数调用操作符() 八、结构体成员访问操作符 8.1 直接访问操作符(.) 8.2 间接访问操作符(->) 九、操作符…

前端笔记-day04

文章目录 01-后代选择器02-子代选择器03-并集选择器04-交集选择器05-伪类选择器06-拓展-超链接伪类07-CSS特性-继承性08-CSS特性-层叠性09-CSS特性-优先级11-Emmet写法12-背景图13-背景图平铺方式14-背景图位置15-背景图缩放16-背景图固定17-background属性18-显示模式19-显示模…

OC foudation框架(下)的学习

OCfoudation框架&#xff08;下&#xff09; 前面学习了有关OCfoudation框架的部分内容&#xff0c;我们现在对于后面的内容继续学习。 文章目录 OCfoudation框架&#xff08;下&#xff09;数组&#xff08;NSArray和NSMutableArray&#xff09;对集合元素整体调用方法排序使用…

数据结构与算法学习笔记三---队列的链式存储表示和实现(C++)

目录 前言 1.队列的概念 2.队列的表示和实现 1.定义 1.初始化 2.入队 3.出队 4.获取队头元素 5.判断是否是空队列 6.完整代码 前言 这篇博客主要讲的是对队列的链式存储。 1.队列的概念 队列是一种访问受限的线性表。仅允许在表的一端进行插入操作&#xff0c;在表的…