wangEditor 出现The given range isn‘t in document.

最新推荐文章于 2023-12-29 10:44:11 发布

原创最新推荐文章于 2023-12-29 10:44:11 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

前端Bug 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何通过Vue.js实现富文本编辑器的正确管理和使用，包括解决重复创建编辑器实例导致的问题，如The given range isn't in document错误，并提供了一个具体的代码示例。

The given range isn't in document

主要需要添加 this.$nextTick(() => {}，用于防止弹窗时 editor 绑定的div还未创建导致的错误

重复创建editor会出现错误，所以新建富文本编辑器的时候先用 editor.destroy() 销毁已经创建完的editor。

   createEdit() {
      editor = new E('#div1')
      
      //创建 editor
      editor.create()
    },
    addNews() {
      this.dialogVisible = true;
        //格式化表单 form
        this.form = {};
        //this.$nextTick 将回调延迟到下次DOM更新循环之后执行。因为弹窗是异步,有时候会出现不能加载的情况
        this.$nextTick(() => {
          //如果editor不存在,则创建,存在的话就先销毁,否则会报错 The given range isn‘t in document.
          if (!editor) {
            this.createEdit();
          }else {
            editor.destroy();//这里做了一次判断，判断编辑器是否被创建，如果创建了就先销毁。
            this.createEdit();
          }
        })
    },