vue项目使用wangeditor并自定义菜单 vue技术交流群（864583465)

87 阅读 0 评论 58 点赞

我是靠谱客的博主听话花生，这篇文章主要介绍vue项目使用wangeditor并自定义菜单 vue技术交流群（864583465)，现在分享给大家，希望可以做个参考。

vue项目使用wangeditor并自定义菜单 vue技术交流群（864583465)

1、安装wangeditor

复制代码

1
2
3
4
npm install wangeditor --save
或
cnpm install wangeditor --save

2、文件名.vue

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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>

3、步骤2说明

建议将编辑器封装成一个组件，便于调用
编辑器相关配置请参考官网文档https://doc.wangeditor.com/

自定义菜单，参考官方文档快速扩展一个菜单

**
4、创建AlertMenu.js文件

复制代码

import E from 'wangeditor' // npm 安装
const { $, BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E
var _this = null
export
default class AlertMenu extends BtnMenu {
constructor(editor) {
// data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
_this = editor
const $elem = E.$(
`<div class="w-e-menu" data-title="Alert">
<button>alert</button>
</div>`
)
super($elem, editor)
}
// 菜单点击事件
clickHandler() {
// 做任何你想做的事情
// 可参考【常用 API】文档，来操作编辑器
let selectionText = _this.selection.getSelectionText()
let SelectionContainerElem
= _this.selection.getSelectionEndElem().elems[0]
console.log(SelectionContainerElem)
_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()
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import E from 'wangeditor' // npm 安装
const { $, BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E
var _this = null
export
default class AlertMenu extends BtnMenu {
constructor(editor) {
// data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
_this = editor
const $elem = E.$(
`<div class="w-e-menu" data-title="Alert">
<button>alert</button>
</div>`
)
super($elem, editor)
}
// 菜单点击事件
clickHandler() {
// 做任何你想做的事情
// 可参考【常用 API】文档，来操作编辑器
let selectionText = _this.selection.getSelectionText()
let SelectionContainerElem
= _this.selection.getSelectionEndElem().elems[0]
console.log(SelectionContainerElem)
_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()
}
}

5、vue文件中引入

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template>
<div class="hello">
<div id="editor"></div>
</div>
</template>
<script>
import E from 'wangeditor'
import AlertMenu from './AlertMenu'
// 根据AlertMenu.js文件实际路径进行引入即可
export default {
data () {
return {
editor: null
}
},
mounted(){
this.createEditor()
},
methods:{
createEditor(){
this.editor = new E('#editor')
this.editor.menus.extend('alertMenu', AlertMenu)
// 配置扩展的菜单
this.editor.config.menus = this.editor.config.menus.concat('alertMenu')
this.editor.create()
},
},
}
</script>