解决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后并未解决问题。于是通过检测错误,提示用户手动确认插入位置,但因为错误发生在插入编辑器时,前置的一些请求等操作已经发生了,所以在这儿做一些额外的业务操作:比如调用接口删除数据库中刚刚未成功插入的内容等。

TypeScript 复制代码
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函数中调用此方法,测试后发现未报错了,内容也成功插入。

最终代码:

TypeScript 复制代码
public activated() {
    // this.editor = new Editor(...) 对象
    if(this.editor) {
        this.editor.initSelection();
    }
}
相关推荐
zhengxianyi51511 小时前
ruoyi-vue-pro优化——如何将一个模块快速变成一个独立的应用进行开发,部署,管理
vue.js·前后端分离·数据大屏·ruoyi-vue-pro优化
风度前端12 小时前
npm 2026安全新规下的免登录发包策略
前端
冴羽12 小时前
2026 年前端必须掌握的 4 个 CSS 新特性!
前端·javascript·css
rgeshfgreh12 小时前
Python流程控制:从条件到循环实战
前端·数据库·python
狗头大军之江苏分军12 小时前
告别旧生态:Ant Design 6 不再支持 IE 与现代前端趋势解读
前端·javascript·后端
C_心欲无痕12 小时前
nginx - 开启 gzip 压缩
运维·前端·nginx
闲云一鹤12 小时前
2026 最新 ComfyUI 教程 - 本地部署 AI 生图模型 - Z-Image-Turbo
前端·人工智能·ai编程
开开心心_Every12 小时前
安卓后台录像APP:息屏录存片段,行车用
java·服务器·前端·学习·eclipse·edge·powerpoint
狗头大军之江苏分军12 小时前
Ant Design 6.0 正式发布:从 V5 到 V6 有哪些变化?
前端
优弧13 小时前
Claude 终于对普通人下手了!Cowork 发布,你的最强 AI 打工搭子来了!
前端·后端