解决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();
    }
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

steam_api64.dll是什么东西?steam_api64.dll缺失的多个详细解决方法

在现代PC游戏领域,Steam无疑是最具影响力的游戏分发和社交平台之一。它不仅提供了一个庞大的游戏市场,还集成了好友系统、成就系统、云存储等多种功能,为数百万玩家提供了便捷的游戏体验。在这庞大的生态系统中,steam_api64.dll作…

快递物流查询:如何实现快递批量查询?这些技巧助你轻松应对

在日常生活和工作中,我们经常需要查询快递物流信息,尤其是当面对大量的快递包裹时,逐一查询无疑会耗费大量的时间和精力。这时,实现快递批量查询就显得尤为重要。本文将为你介绍办公提效工具一些实现快递批量查询的技巧&#xff0…

基于 LlaMA 3 + LangGraph 在windows本地部署大模型 (一)

基于LlaMA 3 LangGraph 在windows本地部署大模型 (一) RAG 是未来人工智能应用的基石。大家并不是在寻求仅仅产生无意义反应的人工智能。而目标是人工智能能够从特定文档集中检索答案,理解查询的上下文,指导自己搜索其嵌入内容或…

嵌入式C语言高级教程:实现基于STM32的智能健康监测手环

智能健康监测手环能够实时监控用户的生理参数,如心率、体温和活动量,对于健康管理和疾病预防非常有帮助。本教程将指导您如何在STM32微控制器上实现一个基本的智能健康监测手环。 一、开发环境准备 硬件要求 微控制器:STM32L476RG&#xf…

软考常见排序

1.桶排序 将需要排序的数组内容全都取出来放在另一个有序的数组中,然后在依次放回(菜鸟网原图) 2.冒泡排序 数组最前面的元素与之后的每个元素依次比较,后面的元素比前面的元素大,就获取后面的元素然后继续与后面元素比较,直到所有元素都比较过一遍. 3.选择排序 从待排序的数据…

Java基础入门day48

day48 JDBC调用关系 tomcat 简介 tomcat是Apache下的一个核心项目,免费开源,支持servlet和jsp。 tomcat技术先进,性能稳定,目前比较流行的web应用服务器 安装 官网: Apache Tomcat - Welcome! 下载 tomcat8.5 解压&a…

JavaScript创建日期

创建日期 在JavaScript中创建日期有四种方法 ● 使用new Date() const now new Date(); console.log(now);● 直接输入月、日、年、时间 console.log(new Date(Aug 02 2024 18:05:41));● 也可以输入年月日 console.log(new Date(December 24, 2015));● 直接按照年、月、…

【人工智能】博弈搜索(极小极大值、α-β剪枝)

1. 极小极大值算法 人工智能中 “博弈” 通常专指博弈论专家们称为有完整信息的、确定性的、轮流行动的、两个游戏者的零和游戏(如国际象棋)。术语中,这是指在确定的、完全可观察的环境中两个 Agent必须轮流行动,在游戏结束时效用值总是相等并…

一、精准化测试介绍

精准化测试介绍 一、精准化测试是什么?二、什么是代码插桩?三、两种插桩方式Offine模式:On-the-fly插桩: 四、jacoco覆盖率报告展示五、增量代码覆盖率监控原理六、精准测试系统架构图七、全量与增量覆盖率报告包维度对比八、全量与增量覆盖率…

芯品荟 | 酒柜屏控案例分享

产品简介 温控酒柜是一种专门设计用于存储和保护酒类的电器,它能为不同类型酒品提供最适宜的保存条件,以维持或提升酒的品质与风味。这类酒柜的主要特点是具备精准的温度控制功能,确保内部温度稳定在一个理想的范围内,通常为葡萄…

【DRAM存储器三十】DDR4介绍-DDR4 SDRAM的主要技术特性之bank group,为什么要搞个group出来?

👉个人主页:highman110 👉作者简介:一名硬件工程师,持续学习,不断记录,保持思考,输出干货内容 参考资料:《镁光DDR4数据手册》 、《JESD79-4B》 DDR4新增了bank group,大家想一想,为什么要增加这么个设定?其目的是什么? 如上是网上看到的一张从SDR到…

14:HAL---CRC校验

103系列只有一个CRC 前言: CRC(Cyclic Redundancy Check),即循环冗余校验,是一种根据网络数据包或电脑文件等数据产生简短固定位数校核码的快速算法,主要用来检测或校核数据传输或者保存后可能出现的错误。…

数据库被攻击后出现1044 - access denied for user ‘root‘@‘% ‘ to database table

MySQL数据库被攻击后,数据库全部被删除,并且加一个一个勒索的数据,向我索要btc, 出现这个问题就是我的数据库密码太简单了,弱密码,被破解了,并且把我权限也给修改了 导致我操作数据库时&#…

HackMyVM-VivifyTech

目录 信息收集 arp nmap nikto whatweb WEB web信息收集 wpscan feroxbuster hydra 提权 系统信息收集 横向渗透 git提权 get root 信息收集 arp ┌──(root㉿0x00)-[~/HackMyVM] └─# arp-scan -l Interface: eth0, type: EN10MB, MAC: 08:00:27:9d:6d:7b, …

PC端与bluetooth蓝牙虚拟串口通信

应该采用RFCOMM虚拟串口方式来进行通信,原理跟socket通信类似,不同的是使用的通信协议不同,本人结合相关的API,做了以下最简单的封装。 1、获取本地蓝牙设备与附近蓝牙设备信息 2、通信类 /* 通信类:只是对于客户端通…

OpenCV的视频 I/O 的标志(77)

返回:OpenCV系列文章目录(持续更新中......) 上一篇:OpenCV 下一篇 :OpenCV系列文章目录(持续更新中......) ​ 枚举 枚举 cv::VideoCaptureAPIs { cv::CAP_ANY 0, cv::CAP_VFW 200, cv::CAP_V4L 200, cv::CAP_V4L2 …

增加表空间的数据文件

Oracle从入门到总裁:​​​​​​https://blog.csdn.net/weixin_67859959/article/details/135209645 表空间创建完成后,后期还可以为表空间增加数据文件,以扩大数据的存储空间。增加表空间数据文件的基本语法结构如下所示。 ALTER TABLESPACE 表空间名…

反着用scaling law验证数据:群聊场景指代消歧

本文作者:白牛 我们之前开源了 LLM 群聊助手茴香豆(以下简称豆哥),它的特点是: 设计了一套拒答 pipeline,实用于群聊场景。能够有效抵抗各种文本攻击、过滤无关话题,累计面对 openmmlab 数千用…

031.下一个排列Java实现

题意 整数数组的一个 排列 就是将其所有成员以序列或线性顺序排列。 例如,arr [1,2,3] ,以下这些都可以视作 arr 的排列:[1,2,3]、[1,3,2]、[3,1,2]、[2,3,1] 。 整数数组的 下一个排列 是指其整数的下一个字典序更大的排列。更正式地&#…

Codeforces Round 944 (Div. 4) A - G

div.4只写部分题解了&#xff0c;都比较基础&#xff0c;数学偏多一点&#xff0c;几乎没有算法&#xff0c;有不懂的欢迎评论区提问&#xff01; A. My First Sorting Problem #include<bits/stdc.h> using namespace std ; typedef long long ll ; const int maxn 2…