Vue3问题：如何使用WangEditor富文本？能自定义才是真的会用！

npm i @wangeditor/editor @wangeditor/editor-for-vue

// 引入 css
import '@wangeditor/editor/dist/css/style.css' 
// 引入 组件
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// 引入 接口类型
import { IDomEditor, IEditorConfig } from "@wangeditor/editor";

<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"
/>
</div>
</template>

<script lang="ts" setup>
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { IDomEditor, IEditorConfig } from "@wangeditor/editor";
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('<p>hello</p>')

// 模拟 ajax 异步获取内容
onMounted(() => {
setTimeout(() => {
valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
}, 1500)
})

// 工具栏配置
const toolbarConfig = {
toolbarKeys: []
}

// 编辑器配置
const editorConfig = { 
placeholder: '请输入内容...',
MENU_CONF: {}
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
const editor = editorRef.value
if (editor == null) return
editor.destroy()
})

// 组件创建时
const handleCreated = (editor) => {
editorRef.value = editor // 记录 editor 实例，重要！
}
</script>

// 工具栏配置
const toolbarConfig = {
toolbarKeys: [
// 一些常用的菜单 key
'bold', // 加粗
'italic', // 斜体
'through', // 删除线
'underline', // 下划线
'bulletedList', // 无序列表
'numberedList', // 有序列表
'color', // 文字颜色
'insertLink', // 插入链接
'fontSize', // 字体大小
'lineHeight', // 行高
'uploadImage', // 上传图片
'uploadVideo',//上传视频
'delIndent', // 缩进
'indent', // 增进
'deleteImage',//删除图片
'divider', // 分割线
'insertTable', // 插入表格
'justifyCenter', // 居中对齐
'justifyJustify', // 两端对齐
'justifyLeft', // 左对齐
'justifyRight', // 右对齐
'undo', // 撤销
'redo', // 重做
'clearStyle', // 清除格式
'fullScreen' // 全屏
]
}

// 编辑器配置
const editorConfig = { 
placeholder: '请输入内容...',
MENU_CONF: {
// 上传图片
uploadImage: {
// 自定义选择图片
async customBrowseAndUpload(insertFn: InsertFnType) {
// 打开图片素材库
photoGalleryDialogVisible.value = true
},
},
// 上传视频
uploadVideo: {
// 自定义选择视频
async customBrowseAndUpload(insertFn: InsertFnType) {
// 打开视频素材库
videoGalleryDialogVisible.value = true
},
}, 
}
}

import { IButtonMenu, IDomEditor } from '@wangeditor/editor'

class MyButtonMenu implements IButtonMenu { // TS 语法
// class MyButtonMenu { // JS 语法

constructor() {
this.title = 'My menu title' // 自定义菜单标题
// this.iconSvg = '<svg>...</svg>' // 可选
this.tag = 'button'
}

// 获取菜单执行时的 value ，用不到则返回空 字符串或 false
getValue(editor: IDomEditor): string | boolean { // TS 语法
// getValue(editor) { // JS 语法
return ' hello '
}

// 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
isActive(editor: IDomEditor): boolean { // TS 语法
// isActive(editor) { // JS 语法
return false
}

// 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
isDisabled(editor: IDomEditor): boolean { // TS 语法
// isDisabled(editor) { // JS 语法
return false
}

// 点击菜单时触发的函数
exec(editor: IDomEditor, value: string | boolean) { // TS 语法
// exec(editor, value) { // JS 语法
if (this.isDisabled(editor)) return
editor.insertText(value) // value 即 this.value(editor) 的返回值
}

}

import { Boot } from '@wangeditor/editor'
import MyButtonMenu from './myButtonMenu'

// 工具栏配置
const toolbarConfig = {
toolbarKeys: [
// 插入菜单key
'menu1',
]
}

// 组件创建时
const handleCreated = (editor: IDomEditor) => {
editorRef.value = editor;

const menu1Conf = {
key: 'menu1', // 定义 menu key ：要保证唯一、不重复（重要）
factory() {
return new MyButtonMenu() // 替换为你菜单的 class
},
}
// 注册菜单
Boot.registerMenu(menu1Conf)
};

import { DomEditor } from '@wangeditor/editor'
const toolbar = DomEditor.getToolbar(editor)

const toolbarConfig = toolbar.getConfig()
// 查看当前菜单排序和分组
console.log( toolbarConfig.toolbarKeys )