vue项目使用wangeditor4并自定义上传附件菜单

基于vue的wangEditor4利用自定义菜单实现上传功能，最终效果图如下：

下面是详细步骤：

1、customWangEditor.vue，这是一个引用wangEditor的vue文件：

<template>
  <div class="hello">
    <div id="editor"></div>
  </div>
</template>
<script>
  import E from 'wangeditor'
export default {
  data () {
    return {
      editor: null
    }
  },
  mounted(){
    this.createEditor()
  },
  methods:{
    createEditor(){
      this.editor = new E('#editor')
      this.editor.create()
    },
  },
}
</script>

2、创建wangEditorUploadFile.js文件

import E from 'wangeditor' // npm 安装
const { BtnMenu } = E
var _this = null
// 上传方法
window.handleFileChange(e){
let formData = new FormData()
let file = e.files[0]
formData.append('file', file, file.name)
const xhr = new XMLHttpRequest()
xhr.open('post', '/api/tool/oss/upload')
// 设置请求头
xhr.setRequestHeader('Authorization', localStorage.getItem('TOKEN'))
xhr.send(formData)
xhr.addEventListener('load' () => {
const res = JSON.parse(xhr.response)
if(res.status === 200){
// 上传成功，将返回的url追加到编辑器中
_this.cmd.do('insertHTML', '附件：<a href="'+res.data+'" target="_blank">'+file.name+'</a>')
}
})
}
export  default class wangEditorUploadFile extends BtnMenu {
  constructor(editor) {
    // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
    _this = editor
    const $elem = E.$(
        `<div class="w-e-menu" data-title="Alert">
            <img src="./static/img/file.png"/>
            <input type="file" style="opacity: 0;width: 16px;height: 16px;position: absolute;" multiple="multiple" onchange="handleFileChange(this)"/>
        </div>`
    )
    super($elem, editor)
  }
  // 菜单点击事件
  clickHandler() {
    // 做任何你想做的事情
    // 可参考【常用 API】文档，来操作编辑器
    // let selectionText = _this.selection.getSelectionText()
    let SelectionContainerElem  = _this.selection.getSelectionEndElem().elems[0]
    _this.cmd.do('fontSize', '36px')
    // 插入内容
    // _this.cmd.do('insertHTML', '<h1>selectionText</h1>')
  }
  // 菜单是否被激活（如果不需要，这个函数可以空着）
  // 1. 激活是什么？光标放在一段加粗、下划线的文本时，菜单栏里的 B 和 U 被激活，如下图
  // 2. 什么时候执行这个函数？每次编辑器区域的选区变化（如鼠标操作、键盘操作等），都会触发各个菜单的 tryChangeActive 函数，重新计算菜单的激活状态
  tryChangeActive() {
    // 激活菜单
    // 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class
    // 2. this.this.isActive === true
    this.active()
    // // 取消激活菜单
    // // 1. 菜单 DOM 节点会删掉 .w-e-active
    // // 2. this.this.isActive === false
    // this.unActive()
  }
}

3、修改刚才的customWangEditor.vue文件

<template>
  <div class="hello">
    <div id="editor"></div>
  </div>
</template>
<script>
import E from 'wangeditor'
import wangEditorUploadFile from './wangEditorUploadFile'
export default {
  data () {
    return {
      editor: null
    }
  },
  mounted(){
    this.createEditor()
  },
  methods:{
    createEditor(){
      this.editor = new E('#editor')
      this.editor.menus.extend('wangEditorUploadFile', wangEditorUploadFile)  // 配置扩展的菜单
      this.editor.config.menus = this.editor.config.menus.concat('wangEditorUploadFile')
      this.editor.create()
    },
  },
}
</script>