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

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

1、安装wangeditor

npm install wangeditor --save
或
cnpm install wangeditor --save

2、文件名.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>

3、步骤2说明

1. 建议将编辑器封装成一个组件，便于调用
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()
}
}

5、vue文件中引入

<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>

PS：欢迎加入vue技术交流群（864583465）进行更多问题的探讨，你的问题将是我们大家共同进步的关键

最后

以上就是听话花生为你收集整理的vue项目使用wangeditor并自定义菜单 vue技术交流群（864583465)的全部内容，希望文章能够帮你解决vue项目使用wangeditor并自定义菜单 vue技术交流群（864583465)所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。