首页 > 建站教程 > 其他 >  vue项目使用wangeditor4并自定义上传附件菜单正文

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

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


111.png


下面是详细步骤:

1、customWangEditor.vue,这是一个引用wangEditor的vue文件:

01<template>
02  <div class="hello">
03    <div id="editor"></div>
04  </div>
05</template>
06<script>
07  import E from 'wangeditor'
08export default {
09  data () {
10    return {
11      editor: null
12    }
13  },
14  mounted(){
15    this.createEditor()
16  },
17  methods:{
18    createEditor(){
19      this.editor = new E('#editor')
20      this.editor.create()
21    },
22  },
23}
24</script>


2、创建wangEditorUploadFile.js文件

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


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

01<template>
02  <div class="hello">
03    <div id="editor"></div>
04  </div>
05</template>
06<script>
07import E from 'wangeditor'
08import wangEditorUploadFile from './wangEditorUploadFile'
09export default {
10  data () {
11    return {
12      editor: null
13    }
14  },
15  mounted(){
16    this.createEditor()
17  },
18  methods:{
19    createEditor(){
20      this.editor = new E('#editor')
21      this.editor.menus.extend('wangEditorUploadFile', wangEditorUploadFile)  // 配置扩展的菜单
22      this.editor.config.menus = this.editor.config.menus.concat('wangEditorUploadFile')
23      this.editor.create()
24    },
25  },
26}
27</script>