在vue中,完成@wangeditor/editor组件的大数据量加载,解决卡顿

背景

简单说一下需求,一个页面中只存在一个Editor组件,但是需要通过选择不同类型展示不同的content的数据,不过直接通过提供的Editor组件加载的时候,在数据量大(测试数据226KB)的情况下, 切换类型时,加载数据会让页面直接卡死,好一会才会执行完毕。

下图展示了数据的大小:

目的

需要在切换不同的类型之后,editor组件丝滑的展示当前类型下的内容,

效果如下

数据量大-editor组件加载

技术栈

  • vue2.x
  • @wangEditor/eidtor @5.1.*

解决方案

思路来源:在官网看到了类似大文件10W字的案例,但是该案例只是单纯展示了页面初始化展示一次,针对加上切换逻辑,还是需要单独处理

核心代码:

javascript 复制代码
import { createEditor } from "@wangeditor/editor";

createEditor({
  selector: "#editor-id",
  html: this.currentData.content,
  config: {
    readOnly: true,
  },
});

使用官方提供的这种加载方式,实现了大数据量加载的问题。

切换之后如何动态丝滑更新?

  1. 第一步 ,我们需要监听使content数据变化的值,然后重新销毁
javascript 复制代码
watch: {
  activeIndex: {
    handler() {
      this.changeEditorContent();
    },
    immediate: false,
  },
  lang: {
    handler() {
      this.changeEditorContent();
    },
    immediate: false,
  },
},
methods: {

  changeEditorContent() {
     this.editorLoading = true;
     const editor = this.editor;
     if (editor == null) {
       this.editorLoading = false;
       return;
     }
     editor.destroy(); // 组件销毁时,及时销毁编辑器
   },
    
}
  1. 第二步,异步加载我们的editor数据
bash 复制代码
methods: {

  changeEditorContent() {
     const editor = this.editor;
     if (editor == null) {
       return;
     }
     editor.destroy();
     // 异步加载
     setTimeout(() => {
        this.handleCreateEditor();
      }, 300);
   },
    
}
  1. 第三步,加上过渡loading效果
javascript 复制代码
changeEditorContent() {
   this.editorLoading = true;
   const editor = this.editor;
   if (editor == null) {
     // 处理初次加载的问题
     this.editorLoading = false;
     return;
   }
   editor.destroy(); // 组件销毁时,及时销毁编辑器
   setTimeout(() => {
     this.handleCreateEditor();
   }, 300);
 },
 /** nothing */
 noop(e) {
   return { e }
 },
 handleCreateEditor() {
   try {
     this.editor = createEditor({
       selector: "#editorRef-article-record",
       html: this.currentData.content,
       config: {
         readOnly: true,
         onCreated: () => {
           this.editorLoading = false;
         },
       },
     });
   } catch (err) {
      // 这里处理掉wangeditor内部的create editor报错,
      // 不影响执行 异步创建会产生
     this.noop(err)
   }
 },

完整代码

javascript 复制代码
<!--
 * 修订记录
 * 
 * @Author: grayson<grayson.gao@bvox.com>
 * @Date: 2024-10-14 17:14:39
 * 
 * Copyright © 2019-2024 bvox.com. All Rights Reserved.
-->
<template>
  <div>
    <Spin v-show="editorLoading" />
    <div id="editor-id"></div>
  </div>
</template>
<script>
import { createEditor } from "@wangeditor/editor";
export default {
  watch: {
    activeIndex: {
      handler() {
        this.changeEditorContent();
      },
      immediate: false,
    },
    lang: {
      handler() {
        this.changeEditorContent();
      },
      immediate: false,
    },
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时,及时销毁编辑器
  },
  data() {
    return {
      lang: "",
      activeIndex: 0,
      editorLoading: false,
      editor: null,
    };
  },
  methods: {    
    changeEditorContent() {
      this.editorLoading = true;
      const editor = this.editor;
      if (editor == null) {
        this.editorLoading = false;
        return;
      }
      editor.destroy(); // 组件销毁时,及时销毁编辑器
      setTimeout(() => {
        this.handleCreateEditor();
      }, 300);
    },
    /** nothing */
    noop(e) {
      return { e }
    },
    handleCreateEditor() {
      try {
        this.editor = createEditor({
          selector: "#editorRef-article-record",
          html: this.currentData.content,
          config: {
            readOnly: true,
            onCreated: () => {
              this.editorLoading = false;
            },
          },
        });
      } catch (err) {
        this.noop(err)
      }
    },
  },
};
</script>

最后

按照以上的处理,我们就可以得到开头所说的,丝滑的打开不同类型下的内容。

不同情况下,大家可能需要做不一样的调整,但是核心代码是不会动的,再次验证方案永远都是只有最合适的,没有最好的!

如果帮到了大家,记得给博主点个赞!

相关推荐
巴博尔几秒前
自定义tabs+索引列表,支持左右滑动切换
前端·uniapp
诗句藏于尽头12 分钟前
音乐播放器-单html文件
前端·html
歪歪10013 分钟前
ts-jest与其他TypeScript测试工具的对比
前端·javascript·测试工具·typescript·前端框架
CodeSheep18 分钟前
JetBrains官宣,又一个IDE可以免费用了!
前端·后端·程序员
刘新明198920 分钟前
Frida辅助分析OLLVM虚假控制流程(下)
java·开发语言·前端
江城开朗的豌豆36 分钟前
小程序登录不迷路:一篇文章搞定用户身份验证
前端·javascript·微信小程序
aesthetician41 分钟前
React 19.2.0: 新特性与优化深度解析
前端·javascript·react.js
FIN66681 小时前
射频技术领域的领航者,昂瑞微IPO即将上会审议
前端·人工智能·前端框架·信息与通信
U.2 SSD1 小时前
ECharts漏斗图示例
前端·javascript·echarts
江城开朗的豌豆1 小时前
我的小程序登录优化记:从短信验证到“一键获取”手机号
前端·javascript·微信小程序