再完美的编辑器,如果不能直接修改源码,我总觉得欠缺些什么,当然对于大部分不懂代码的人来说,这个功能毫无用处,但是会与懂html代码的来说,那就非常有必要了,这样就能更精细的修改内容了。
- 菜单分为几种,都可以扩展
- ButtonMenu 按钮菜单,如加粗、斜体
- SelectMenu 下拉菜单,如标题、字体、行高
- DropPanelMenu 下拉面板菜单,如颜色、创建表格
- ModalMenu 弹出框菜单,如插入链接、插入网络图片
我们这里以ButtonMenu菜单为例,先在编辑器下方添加一个隐藏的div,这个div用来展示源码的,textarea也是双向绑定valueHtml的值,当编辑器里的内容改变时,源码也会同时改变。
<template>
<div style="border: 1px solid #ccc">
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
:mode="mode" />
<Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig"
:mode="mode" @onCreated="handleCreated" @onChange="handleChange"/>
</div>
<div class="hideSource" style="margin-top: 10px;width: 100%;display: none;">
<textarea
v-model="valueHtml"
style="width: 100%; height: 200px; outline: none"
></textarea>
</div>
</template>
然后实现MyButtonMenu类,必须要实现isActive、getValue、isDisabled、exec四个方法,其中exec是重点,也就是点击这个button触发的事件,新建menu.js
import { Boot } from '@wangeditor/editor'
//import format from 'xml-formatter'
// 定义菜单 class
class MyButtonMenu {
title = '源码'
tag = 'button'
alwaysEnable = true
isActive() {
this._isactive = !this._isactive
return this._isactive
}
getValue() {
return ''
}
isDisabled() {
return false
}
exec() {
const div = document.querySelectorAll('.hideSource')[0]
if (div.style.display === 'block') {
div.style.display = 'none'
}
else {
div.style.display = 'block'
}
}
}
// 定义菜单配置
export const menuSource = {
key: 'menusource', // menu key ,唯一。注册之后,可配置到工具栏
factory() {
return new MyButtonMenu()
},
}
Boot.registerMenu(menuSource)
插入此button
const toolbarConfig = {
insertKeys: {
index: 0, // 插入的位置,基于当前的 toolbarKeys
keys: ['menusource']
},
/* 工具栏配置 */
toolbarKeys: toolBar
}
评论 (0)