vue3使用wangEditor-v5学习笔记(三)添加查看源码功能

再完美的编辑器，如果不能直接修改源码，我总觉得欠缺些什么，当然对于大部分不懂代码的人来说，这个功能毫无用处，但是会与懂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
}

最后的效果如下，如果有时间可以进行美化处理，我这里就凑合用用了。