wangeditor富文本编辑器集成vod超级播放器

<template lang="html">
  <div class="editor" >
<!--    <SelectFile></SelectFile>-->
    <el-dialog
      append-to-body
      title="选择要插入的文件"
      :visible.sync="dialogVisible"
      width="60%">
      <SelectFile @addImage="addImage" @addVideo="addVideo"></SelectFile>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <div ref="toolbar" class="toolbar">
    </div>
    <div ref="editor" class="text" :style="{height: height, overflow: 'scroll'}">
    </div>
    <!--选择我的文件页面-->
  </div>
</template>

<script>
import SelectFile from "./SelectFile";
// 引入 wangEditor
import E from 'wangeditor' // npm 安装
// const E = window.wangEditor // CDN 引入的方式

// 获取必要的变量，这些在下文中都会用到
const { $, BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E
import { mapGetters, mapMutations, mapActions } from 'vuex'
// 标题菜单的 class ，可作为 DropList 菜单的参考代码
class Head extends PanelMenu {
  constructor(editor) {
    // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
    const $elem = $('<div class="w-e-menu" data-title="标题">文件</div>')
    super($elem, editor)
  }
  // 菜单点击事件
  clickHandler() {
    this.editor.config.showFiles()
    return
  }
  /*constructor(editor) {
    // 菜单栏中，标题菜单的 DOM 元素
    // 注意，这里的 $ 不是 jQuery ，是 E.$ （wangEditor 自带的 DOM 操作工具，类似于 jQuery）
    // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
    const $elem = $('<div class="w-e-menu" data-title="标题">文件</div>')
    //
    // droplist 配置
    const dropListConf = {
      width: 100,
      title: '我的文件',
      type: 'list',
      list: [
        { $elem: $('<h1>H1</h1>'), value: '<h1>' },
        { $elem: $('<h2>H2</h2>'), value: '<h2>' },
        { $elem: $('<h3>H3</h3>'), value: '<h3>' },
        { $elem: $('<h4>H4</h4>'), value: '<h4>' },
        { $elem: $('<h5>H5</h5>'), value: '<h5>' },
        { $elem: $('<p>正文</p>'), value: '<p>' },
      ],
      // droplist 每个 item 的点击事件
      clickHandler: (value) => {
        // value 参数即 dropListConf.list 中配置的