基于vue的wangEditor4利用自定义菜单实现上传功能,最终效果图如下:
下面是详细步骤:
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' |
08 | export 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文件
01 | import E from 'wangeditor' // npm 安装 |
02 | const { BtnMenu } = E |
03 | var _this = null |
04 | // 上传方法 |
05 | window.handleFileChange(e){ |
06 | let formData = new FormData() |
07 | let file = e.files[0] |
08 | formData.append( 'file' , file, file.name) |
09 | const xhr = new XMLHttpRequest() |
10 | xhr.open( 'post' , '/api/tool/oss/upload' ) |
11 | // 设置请求头 |
12 | xhr.setRequestHeader( 'Authorization' , localStorage.getItem( 'TOKEN' )) |
13 | xhr.send(formData) |
14 | xhr.addEventListener( 'load' () => { |
15 | const res = JSON.parse(xhr.response) |
16 | if (res.status === 200){ |
17 | // 上传成功,将返回的url追加到编辑器中 |
18 | _this.cmd. do ( 'insertHTML' , '附件:<a href="' +res.data+ '" target="_blank">' +file.name+ '</a>' ) |
19 | } |
20 | }) |
21 | } |
22 | export 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> |
07 | import E from 'wangeditor' |
08 | import wangEditorUploadFile from './wangEditorUploadFile' |
09 | export 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> |