解决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.mzph.cn/web/10676.shtml

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

相关文章

青少年软件编程(Python)等级考试试卷(二级)2024年3月

2024.03电子学会青少年软件编程 Python二级 等级考试试卷 一、单选题 1.期末考试结束了,全班的语文成绩都储存在列表score 中,班主任老师请小明找到全班最高分,小明准备用Python 来完成,以下哪个选项,可以获取最高分…

较难题 链表的回文结构

本题来自链表的回文结构_牛客题霸_牛客网 (nowcoder.com) 234. 回文链表 - 力扣(LeetCode) 题面: 对于一个链表,请设计一个时间复杂度为O(n),额外空间复杂度为O(1)的算法,判断其是否为回文结构。 给定一个链表的头…

03.Linux文件操作

1.操作系统与Linux io框架 1.1 io与操作系统 1.1.1 io概念 io 描述的是硬件设备之间的数据交互,分为输⼊ (input) 与输出 (output)。 输⼊:应⽤程序从其他设备获取数据 (read) 暂存到内存设备中;输出:应⽤程序将内存暂存的数据…

FANUC机器人基本保养概述

对于工业机器人来说,定期保养机器人可以延长机器人的使用寿命。对于FANUC机器人来说,FANUC机器人的常规保养周期可以分为日常、三个月、六个月、一年、两年、三年。以下是FANUC机器人的基本保养周期概览: 在实际生产应用中,可以参…

具身智能论文

目录 1. PoSE: Suppressing Perceptual Noise in Embodied Agents for Enhanced Semantic Navigation2. Embodied Intelligence: Bionic Robot Controller Integrating Environment Perception, Autonomous Planning, and Motion Control3. Can an Embodied Agent Find Your “…

7.STL_string(详细)

1. 什么是STL STL(standard template libaray-标准模板库):是C标准库的重要组成部分,不仅是一个可复用的组件库,而且 是一个包罗数据结构与算法的软件框架。 2. STL的版本 原始版本 Alexander Stepanov、Meng Lee 在惠普实验室完成的原始版…

maven远程仓库访问顺序

首先需要了解一下各个配置文件,主要分为三类: 全局配置文件(${maven.home}/conf/settings.xml),maven安装路径下的/conf/settings.xml用户配置文件(%USER_HOME%/.m2/settings.xml),windows用户文件夹下项目配置文件:p…

C/C++ 入门(10)list类(STL)

个人主页:仍有未知等待探索-CSDN博客 专题分栏:C 欢迎来指教! 目录 一、标准库中的list 1、了解 2、常用接口说明 a.常见的构造函数 b.迭代器 c. Capacity​编辑 d.Element access e.Modifiers 二、实现 1、框架 a.节点 b.迭代器 …

简单易懂的Java Queue入门教程!

哈喽,各位小伙伴们,你们好呀,我是喵手。运营社区:C站/掘金/腾讯云;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点,并以文字的形式跟大家一起交流,互相学习,一…

如何建设智慧党校

随着信息技术的飞速展开,特别是近年移动互联网技术,物联网技术,人工智能技术,大数据数据的深入展开,我国快速的进入信息化社会,信息化对各行各业的改造越来越深入,任何职业,任何安排…

SSM【Spring SpringMVC Mybatis】—— Spring(一)

目录 1、初识Spring 1.1 Spring简介 1.2 搭建Spring框架步骤 1.3 Spring特性 1.5 bean标签详解 2、SpringIOC底层实现 2.1 BeanFactory与ApplicationContexet 2.2 图解IOC类的结构 3、Spring依赖注入数值问题【重点】 3.1 字面量数值 3.2 CDATA区 3.3 外部已声明be…

浅谈ArrayList和LinkedList的区别

ArrayList和LinkedList在Java中都是常用的List接口的实现类,但它们之间存在一些显著的区别。 实现方式: ArrayList:基于数组实现。内部使用一个动态数组来存储元素,这意味着可以通过索引快速访问元素,时间复杂度为O(1)…

算法学习笔记(Nim游戏)

N i m Nim Nim游戏 n n n堆物品,每堆有 a i a_i ai​个,每个玩家轮流取走任意一堆的任意个物品,但不能不取,取走最后一个物品的人获胜。 N i m Nim Nim游戏是一种经典的公平组合游戏。现在对它进行分析。 首先定义两个博弈中的状…

【Chisel】chisel中怎么处理类似verilog的可变位宽和parameter

在 Chisel 中处理可变位宽和参数的方式与 Verilog 有一些不同,因为 Chisel 是建立在 Scala 语言之上的。以下是如何在 Chisel 中处理这些概念的方法: 参数化(Parameters) 在 Chisel 中,参数化是通过在模块构造函数中定…

VUE使用饿了么的上传组件时实现图片预览

创作灵感 最近在写项目时,遇到了上传头像的需求,我使用的是element组件中的upload组件。但是在使用时,我需要实现预览、手动上传头像等功能。然而在使用饿了么组件时,这些功能还是需要我们自己去手动实现的,在手动实现…

Linux makefile进度条

语法 在依赖方法前面加上就不会显示这一行的命令 注意 1.make 会在当前目录下找名为“makefile” 或者 “Makefile” 的文件 2.为了生成第一依赖文件,如果依赖文件列表有文件不存在,则会到下面的依赖关系中查找 3..PHONY修饰的依赖文件总是被执行的 …

Redis——RDB、AOF和混合持久化机制

Redis提供了三种持久化机制来确保数据的持久保存,分别是RDB(Redis DataBase)、AOF(Append Only File)和混合持久化。 RDB(Redis DataBase) RDB持久化机制是将Redis在内存中的数据保存到磁盘上的…

xss-lab 1-18关payload

Less-1 ?name<script>alert()</script> Less-2 "><script>alert()</script> "οnclick"alert() " οnfοcus"alert() " οnblur"alert() Less-3 οnfοcusalert() οnbluralert() οnfοcusjavascript:aler…

Spring AopUtils深度解析:从入门到精通的全方位指南

1. 概述 AopUtils是Spring框架中的一个工具类&#xff0c;主要用于处理AOP&#xff08;面向切面编程&#xff09;相关的操作。它提供了一系列静态方法&#xff0c;帮助开发者更方便地处理AOP中的对象、代理以及通知&#xff08;Advice&#xff09;等。 2. 用途 AopUtils的主要…

操作系统原理与系统——实验十三多道批处理作业调度(作业可移动)

关键代码 #include<stdio.h> #include<stdlib.h> #include<string.h> typedef struct data{int hour;//当前小时int min;//当前分钟 }time; struct node{char name[20];//进程名time arrive;//到达就绪队列时间int zx;//执行时间(预期时间)int size;int ta…