解决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(msg.includes('Uncaught TypeError') &&msg.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.rhkb.cn/news/328110.html

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

相关文章

ChatGPT未来可能应用于iPhone?

苹果接即将与OpenAI达成协议 ChatGPT未来应用于iPhone 前言 就在5月11日,苹果公司正与OpenAI进行深入讨论,计划在其最新的iOS操作系统中整合OpenAI的先进技术。这一举措是苹果公司在为其产品线融入更先进的人工智能功能所做努力的一部分。 目前情况双方…

人机协同中的比较、调整与反转

人机协同是指人与机器之间的合作关系,通过共同努力实现特定任务的目标。在人机协同中,存在着比较与调整的过程,这是为了实现更好的合作效果和任务完成质量。 比较是指人与机器在任务执行过程中对彼此的表现进行评估和比较。这可以通过对机器的…

Prosys OPC UA Simulation Server工程文件备份方法

Prosys OPC UA Simulation Server是一款免费的OPC UA服务器仿真软件,具体的使用和下载参考官网: Prosys OPC - OPC UA Simulation Server Downloads 他的免费版本不提供工程文件的备份、导入导出功能,每次退出时保存。如果需要工程备份&a…

动规解决01背包/完全背包精讲

还不会用动态规划解决01背包/完全背包?看这一篇文章就够了! 首先我们要明白什么是01背包和完全背包。 背包问题总体问法就是: 你有一个背包,最多能容纳的体积是V。 现在有n个物品,第i个物品的体积为vi​ ,价值为wi​…

Unity使用sherpa-onnx实现离线语音合成

sherpa-onnx https://github.com/k2-fsa/sherpa-onnx 相关dll和lib库拷进Unity,官方示例代码稍作修改 using SherpaOnnx; using System; using System.IO; using System.Runtime.InteropServices; using UnityEngine;public class TTS : MonoBehaviour {public st…

电脑压缩图片怎么压缩?简单高效的压缩技巧

当我们将一些图片上传到各大网站的时候,经常会被提示图片大小超过网站的限制而被禁止上传,其实这是网站的一种防御措施,防止大量体积太大的图片占用了网站服务器的存储空间,从而影响用户体验,所以为了解决这个问题&…

详解xlsxwriter 操作Excel的常用API

我们知道可以通过pandas 对excel 中的数据进行处理分析,但是pandas本身对格式化数据方面提供了很少的支持,如果我们想对pandas进行数据分析后的数据进行格式化相关操作,我们可以使用xlsxwriter,本文就对xlsxwriter的常见excel格式…

摸鱼大数据——Linux搭建大数据环境(安装zooKeeper和zookeeper shell命令)五

安装zookeeper软件 1.上传软件 使用CRT等客户端远程上传 zookeeper-3.4.6.tar.gz 文件到/export/software目录下 2.解压软件 [rootnode1 ~]# cd /export/software/ [rootnode1 software]# tar -xzvf zookeeper-3.4.6.tar.gz -C /export/server/ [rootnode1 software]# cd /ex…

未来IT行业的模块化、学习与跨界融合

随着技术的快速发展,IT行业已成为推动全球经济和社会发展的核心动力。从云计算和大数据到人工智能(AI)和物联网,这些创新技术正在彻底改变我们的生活方式和工作模式。而在AI领域,尤其是人工智能生成内容(AI…

javaSE:类和对象

面向对象 java是一种面向对象的编程语言,面向对象就是把能为我们所用的东西直接拿来使用,省去中间过程,比如洗衣服,要完成这一个动作,我们本来需要一个盆,放水,放衣服,换水&#xf…

【算法-程序的灵魂#谭浩强配套】(适合专升本、考研)

无偿分享学习资料,需要的小伙伴评论区或私信dd。。。 无偿分享学习资料,需要的小伙伴评论区或私信dd。。。 无偿分享学习资料,需要的小伙伴评论区或私信dd。。。 完整资料如下: 1.一个程序主要包括以下两方面信息:程…

python中cv2,等等如何修改为中文字体显示,这里以人脸表情识别中文标签为例

中文字体显示 首先下载字体包部署字体包代码实现部分 想必大家在使用python过程中都会遇到,想要显示中文的时候,但是py基本上都是英文字体,下面我将给大家提供一个比较好的解决方案: 首先下载字体包 方法: 我使用的是…

亚信安全发布《2024年第一季度网络安全威胁报告》

亚信安全2024年第一季度网络安全威胁报告 一季度威胁概览 《亚信安全2024年第一季度网络安全威胁报告》的发布旨在从一个全面的视角解析当前的网络安全威胁环境。此报告通过详尽梳理和总结2024年第一季度的网络攻击威胁,目的是提供一个准确和直观的终端威胁感知。…

机器学习:葡萄酒品质预测

说明,此项目是我的期末大作业,包括了对数据集探索,预处理以及分类的各个详细过程与描述,代码简单,主要是一个分类项目的流程,并没有对模型进行深度研究,因此我写在这里。 目录 一、问题介绍 …

GPT5 如何使用?GPT5 如何订阅?GPT5 功能全面详解

结论是:GPT2 很糟糕 ,GPT3 很糟糕 ,GPT4 可以 ,但 GPT5 会很好。 ChatGPT5今年发布 GPT5发布的具有推理功能的不断发展,就像 iPhone 一样。 Sam Altman 于 17 日(当地时间),在世界…

Redis-分片集群存储及读取数据详解

文章目录 Redis分片集群是什么?Redis分片集群的存储及读取数据? 更多相关内容可查看 Redis分片集群是什么? Redis分片集群是一种分布式部署方式,通过将数据分散存储在多个Redis节点上,从而提高了系统的性能、扩展性和…

电子邮箱怎么注册?电子邮箱注册教程,只需要三步

电子邮箱在我们工作和生活中都是必不可少的沟通工具。电子邮箱怎么注册?电子邮箱的注册步骤是怎么样的?本文将从电子邮箱注册前的准备资料介绍,到具体电子邮箱注册的三个步骤进行详细讲解。 一、电子邮箱注册前的准备 电子邮箱是一个具有唯…

图像处理:图像噪声添加

文章目录 前言一、高斯噪声二、椒盐噪声三、泊松噪声四、斑点噪声五、指数噪声六、均匀噪声总结 前言 本文主要介绍几种添加图像噪声的方法,用于数据增强等操作。 以下图为例。 一、高斯噪声 高斯噪声就是给图片添加一个服从高斯分布的噪声,可以通过调…

类图及类的关系

类图(Class Diagram)是UML(Unified Modeling Language,统一建模语言)中的一种图,用于描述系统中类的静态结构,包括类的属性、方法以及类之间的关系。 一、类 类(Class)…

vue项目打包后也能配置静态资源路径

根目录public下新建config.json配置文件,如: {"VITE_URL_3DTILES_BIG":"http://192.168.1.1:88/abu1/tW4fYCyXi/tileset.json","VITE_URL_3DTILES_SMALL":"http://192.168.1.1:181/3dtile_200/tileset.json",&…