wangeditor V5 vue 版本组件封装

<template>
  <div id="border" style="position: relative;z-index:999;">
    <div style="border: 1px solid #ccc; margin-top: 10px">
      <!-- 工具栏 -->
      <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor"
          :defaultConfig="toolbarConfig"
      />
      <!-- 编辑器 -->
      <Editor
          style="height: 400px; overflow-y: hidden;position: relative;z-index: 0;"
          :defaultConfig="editorConfig"
          v-model="html"
          @onChange="onChange"
          @onCreated="onCreated"
      />
    </div>
  </div>
</template>

<script>
import {Boot} from '@wangeditor/editor';
import {Editor, Toolbar} from "@wangeditor/editor-for-vue";
import formulaModule from "@wangeditor/plugin-formula";
import axios from 'axios';
Boot.registerModule(formulaModule);

export default {
  name: "MyEditor",
  components: {Editor, Toolbar},
  props: {
    editorContent: {
      type: String,
      required: true
    },
  },
  data() {
    return {
      editor: null,
      html: this.editorContent,
      toolbarConfig: {
        // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
        // excludeKeys: [ /* 隐藏哪些菜单 */ ],
      },
      editorConfig: {
        placeholder: "请输入内容...",
        MENU_CONF: {
          uploadImage: {
            customUpload: (file) => {
              this.insertFn(file, 1)
            },
          },
          uploadVideo: {
            customUpload: (file) => {
              this.insertFn(file, 2)
            },
          },

        },
        hoverbarKeys: {
          formula: {
            menuKeys: ["editFormula"], // “编辑公式”菜单
          },
        },
      },
    };
  },
  methods: {
    insertFn(file, index) {
*oss 上传或者是接口上传 返回的图片或者是视频路径 返回值自定义拼接文本 *
            that.html = that.html + `<img src="${imgUrl}" />`
        
            that.html = that.html +`<div data-w-e-type="video" data-w-e-is-void><video controls="true" poster="${data.imgUrl}"><source src="${data.videoUrl}" type="video/mp4"/></video></div>`
    },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错

    },
    onChange(editor) {
      this.$emit("input", editor.getHtml()); // onChange 时获取编辑器最新内容
    },
    getEditorText() {
      const editor = this.editor;
      if (editor == null) return;
    },
    printEditorHtml() {
      const editor = this.editor;
      if (editor == null) return;
    },
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    setTimeout(() => {
      this.html = this.editorContent
    }, 1500);
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁 editor ，重要！！！
  },
};
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>