wangeditor 自定义附件上传菜单

官网：自定义扩展新功能 | wangEditor

import {Boot} from "@wangeditor/editor";
//文件上传方法
import {uploadDoc} from "@/api/file/file";
import {Loading} from 'element-ui';

const menu1Conf = {
  key: 'wordUpload',
  factory() {
    return new MyButtonMenu()
  },
}
Boot.registerMenu(menu1Conf)
var e = null;
//图片前缀
var baseUrl = process.env.VUE_APP_BASE_API;

export  default class MyButtonMenu {
  constructor() {
    this.title = 'word上传'
    this.tag = 'button'
    this.showModal = true
    this.modalWidth = 300
  }

  // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
  isActive(editor) {
    return false
  }

  // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
  getValue(editor) {
    return ''
  }

  // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
  isDisabled(editor) {
    return false
  }

  // 点击菜单时触发的函数
  exec(editor, value) {
    // this.$modal.loading("文件正在处理中，请稍候...");
    e = editor;
    let input = document.createElement('input'); // 创建一个input标签
    input.setAttribute("id","wordUpload")
    // input.setAttribute("style","display:none")
    input.setAttribute("style","display:none")
    input.type ='file';
    input.click();
    input.onchange = inputUpload;

    /*input.addEventListener('click', (event) => {
       let params = new FormData()// FormData类型其实是在XMLHttpRequest 2级定义的，
       params.append('file',event.target.files[0])

    })*/
    input.remove();
    return input;
  }
/*  getModalPositionNode(editor) {
    return null;
  }

  getModalContentElem(editor) {

  }*/

}
const inputUpload = async (event) => {
  let loading = Loading.service({ fullscreen: true });
  let file = event.target.files[0];
  let formData = new FormData();
  formData.append('file', file);
  // 请求文件上传接口
  uploadDoc(formData).then((res) => {
    if(res.code == 200) {
      // e.setHtml("");
      //替换图片前缀
      let content = res.data.replace(/<style>[\s\S]*?<\/style>/ig, '')
      let srcReg = /src=([\'\"]?([^\'\"]*)[\'\"]?)/ig;
      if (content) {
        content = content.replace(srcReg, "src='" + baseUrl + "$2" + "'");
      }
      let reg = /(<\/?font.*?>)|(<\/?div.*?>)|(<\/?a.*?>)/gi;;
      content = content.replace(reg, '');
      e.setHtml(content);
    }
  }).finally(()=>{
    loading.close();
  })
}

vue2引入

data() {
  return {
    editor: null,
    html: "",
    toolbarConfig: {
      //新增菜单
      insertKeys : {
        index: 30,
        keys: ['wordUpload']
      },
      //过滤菜单
      excludeKeys: ["emotion", "group-video"]
    }
}
}

vue3引入

const toolbarConfig = {
  toolbarKeys: [
    'headerSelect',
    'bold',
    'underline',
    "italic",
    "fontSize",
  ],
insertKeys: {
    index: 5, // 插入的位置，基于当前的 toolbarKeys
    keys: ['wordUpload']
}
}