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

news2024/11/16 7:51:50

前提: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.coloradmin.cn/o/1665699.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

xilinx xdma drive 传输8MB以上数据受限的问题

当传输超过8 MB数据时报错error code1359, #define XDMA_MAX_TRANSFER_SIZE (8UL * 1024UL * 1024UL) 可以修改成: #define XDMA_MAX_TRANSFER_SIZE (80UL * 1024UL * 1024UL) VS2019 WDK环境的搭建 先准备好VS WDK的驱动开发环境。需要下载VS、SD…

【无标获取S4与ECC的具体差异的方法题】

首先我们需要对ECC vs S4的差异这个课题要有一个深刻的理解,这不是一个简单并能准确说清楚的课题。 我们需要结合实际项目的具体情况去回答这个问题,因为这个问题本身是没有标准答案的。 首先要了解SAP本身ERP产品线的发展概况,其次我们要…

LeetCode---396周赛

题目列表 3136. 有效单词 3137. K 周期字符串需要的最少操作次数 3138. 同位字符串连接的最小长度 3139. 使数组中所有元素相等的最小开销 一、有效单词 按照题目要求,统计个数,看是否符合条件即可,代码如下 class Solution { public:b…

conan2 基础入门(03)-使用(msvc为例)

conan2 基础入门(03)-使用(msvc为例) 文章目录 conan2 基础入门(03)-使用(msvc为例)⭐准备生成profile文件预备文件和Code ⭐使用指令预览正确执行结果可能出现的问题 ⭐具体讲解conanconanfile.txt执行 install cmakeCMakeLists.txt生成项目构建 END ⭐准备 在阅读和学习本文…

Springboot集成Netflix-ribbon、Enreka实现负载均衡-12

Netflix Ribbon简介 Netflix Ribbon是Netflix发布的云中间层服务开源项目,主要功能是提供客户端的软件负载均衡算法,将Netflix的中间层服务连接在一起。 具体来说,Ribbon是一个客户端负载均衡器,可以在配置文件中列出所有的服务…

力扣例题(循环队列)

链接 . - 力扣(LeetCode) 描述 思路 我们使用数组来创建循环队列 数组的大小我们就额外对开辟一块空间 MyCircularQueue(k) 开辟一个结构体,存放队列的相关数据 分别为size,数组指针_a,起始位置head,结束位置tail 注意:我们…

【harbor】harbor的搭建与使用

harbor的搭建与使用 文章目录 harbor的搭建与使用1. harbor的下载2. 创建ssl证书3.harbor的配置3. docker修改4.启动harbor5.使用docker总结 1. harbor的下载 harbor仓库地址:https://github.com/goharbor/harbor harbor主要是go语言写的,但是我们dock…

Docker停止不了

报错信息 意思是,docker.socket可能也会把docker服务启动起来 解决 检查服务状态 systemctl status dockersystemctl is-enabled docker停止docker.socket systemctl stop docker.socket停止docker systemctl stop docker知识扩展 安装了docker后,…

计算机字符集产生的历史与乱码

你好,我是 shengjk1,多年大厂经验,努力构建 通俗易懂的、好玩的编程语言教程。 欢迎关注!你会有如下收益: 了解大厂经验拥有和大厂相匹配的技术等 希望看什么,评论或者私信告诉我! 文章目录 一…

python数据分析——pandas数据结构2

参考资料:活用pandas库 导入基础数据 # 导入库 import pandas as pd # 读取数据集 dfpd.read_csv(r"..\data\scientists.csv") df.head() 1、DataFrame DataFrame是Pandas中最常见的对象。可以把它看作python存储电子表格式数据的方式。Series数据结构…

PMOS和NMOS

一. MOS管简介 MOS管是场效应管的一种,主要有两种结构形式:N沟道和P沟道,又根据场效应原理的不同,分为耗尽型(当栅压为零时有较大漏极电流)和增强型(当栅压为零,漏极电流也为零&…

Jenkins 备份恢复插件 ThinBackup

系统环境: Jenkins 版本:2.213 一、简介 在部署完 Jenkins 后首先要准备的就是数据备份问题,尤其是在生产环境下的 Jenkins,如果数据丢失很可能导致项目上线和开发时间受到影响,所以备份数据很重要。还好,…

[算法][差分数组][leetcode]1094. 拼车

地址&#xff1a; https://leetcode.cn/problems/car-pooling/description/ 解法一&#xff1a;暴力解法 class Solution {public boolean carPooling(int[][] trips, int capacity) {//特殊条件判断if(nulltrips||capacity<0){return false;}int [] d new int[1001];//暴…

VTK官方例子

VTK官方例子 vtkMutableDirectedGraph #!/usr/bin/env python# noinspection PyUnresolvedReferences import vtkmodules.vtkInteractionStyle # noinspection PyUnresolvedReferences import vtkmodules.vtkRenderingOpenGL2 from vtkmodules.vtkCommonColor import vtkName…

数组二叉树-华为OD

系列文章目录 文章目录 系列文章目录前言一、题目描述二、输入描述三、输出描述四、java代码五、测试用例 前言 本人最近再练习算法&#xff0c;所以会发布一些解题思路&#xff0c;希望大家多指教 一、题目描述 二叉树也可以用数组来存储&#xff0c;给定一个数组&#xff…

信息系统项目管理师0103:初步可行性研究(7项目立项管理—7.2项目可行性研究—7.2.2初步可行性研究)

点击查看专栏目录 文章目录 7.2.2初步可行性研究1.初步可行性研究定义2.辅助研究的目的和作用3.初步可行性研究的作用4.初步可行性研究的主要内容记忆要点总结7.2.2初步可行性研究 1.初步可行性研究定义 初步可行性研究一般是在对市场或者客户情况进行调查后,对项目进行的初步…

linux上使用mariadb安装mysql环境

之前都是手动安装mysql数据库&#xff0c;现在尝试下在线安装&#xff0c;为后面的项目部署做准备&#xff0c;突然发现使用mariadb安装mysql环境真的超级简单。 1.使用mariadb安装mysql 安装服务端&#xff1a; yum install mariadb-server -y 安装客户端&#xff1a; yum i…

大数据Scala教程从入门到精通第六篇:Scala编译结果反编译分析

一&#xff1a;Scala编译结果反编译分析 问题&#xff1a;为什么Scalac之后的生成的class文件有两个&#xff0c;一个带$的&#xff0c;一个不带$的&#xff1f; 不能直接java 执行scala编译的字节码文件。 直接运行的话就会报错&#xff0c;会报一个类没有被找到。 引入类库就…

【全面介绍下Spring】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

Excel中实现md5加密

1.注意事项 (1)在Microsoft Excel上操作 (2)使用完&#xff0c;建议修改的配置全部还原&#xff0c;防止有风险。 2.准备MD5宏插件 MD5加密宏插件放置到F盘下&#xff08;直接F盘下&#xff0c;不用放到具体某一个文件夹下&#xff09; 提示&#xff1a;文件在文章顶部&…