‌wangEditor 所有菜单项分类、说明及隐藏方法

以下为菜单项分类及对应 Key 列表，结合工具栏配置和 API 文档整理：

一、文本格式类‌‌

1、基础样式‌

bold（加粗）
italic（斜体）
underline（下划线）
through（删除线）
code（行内代码）
sub（下标）
sup（上标）
clearStyle（清除格式）

2‌、字体与段落‌

color（文字颜色）
bgColor（背景颜色）
fontSize（字号）
fontFamily（字体）
lineHeight（行高）
headerSelect（标题选择）
header1-header5（标题 1-5）

3、对齐与缩进‌

justifyLeft（左对齐）
justifyRight（右对齐）
justifyCenter（居中对齐）
justifyJustify（两端对齐）
indent（增加缩进）
delIndent（减少缩进）

二、插入功能类‌

‌

1、多媒体插入‌

insertImage（插入图片）
uploadImage（上传图片）
insertVideo（插入视频）
uploadVideo（上传视频）
insertLink（插入链接）
insertTable（插入表格）

2‌、代码与引用‌

codeBlock（代码块）
blockquote（引用块）

3、列表与任务‌

bulletedList（无序列表）
numberedList（有序列表）
todo（任务列表）

三、操作与交互类‌

1、撤销与重做‌

undo（撤销）
redo（重做）

2、全屏与分割线‌

fullScreen（全屏）
divider（分割线）
enter（换行模式切换）

3、表格操作‌

deleteTable（删除表格）
insertTableRow（插入行）
deleteTableRow（删除行）
insertTableCol（插入列）
deleteTableCol（删除列）
tableHeader（表格表头）

四、菜单组（Group Keys）‌

group-image（图片组，含插入/上传/编辑图片）
group-video（视频组，含插入/上传视频）
group-link（链接组，含插入/编辑/取消链接）

五、获取最新菜单项列表‌

‌通过代码动态获取‌

const editorRef = shallowRef() // Vue3 示例
const handleCreated = (editor) => {
  const allMenuKeys = editor.getAllMenuKeys() // 获取所有菜单项 Key
  console.log('当前版本所有菜单项:', allMenuKeys)
}

输出结果包含当前版本所有有效 Key
‌验证菜单项是否存在‌

打印 toolbar.getConfig().toolbarKeys 查看实际生效的菜单项

‌六、 配置 excludeKeys 排除表情包‌

‌在 Toolbar 组件中传递配置‌：确保 excludeKeys 绑定到 Toolbar 组件的 defaultConfig 属性。

vue

<template>
  <Toolbar :defaultConfig="toolbarConfig" />
  <Editor v-model="valueHtml" :defaultConfig="editorConfig" />
</template>

<script setup>
import { IToolbarConfig } from '@wangeditor/editor'

// 工具栏配置
const toolbarConfig: Partial<IToolbarConfig> = {
  excludeKeys: ['emotion'] // 移除表情包
}
</script>

‌注意事项‌

‌菜单组优先‌：隐藏复杂功能（如图片）需使用 group-image 而非单个 insertImage。
‌版本差异‌：不同版本菜单项可能调整，建议通过 getAllMenuKeys() 动态获取最新列表。
‌配置生效‌：需通过 Toolbar 组件的 defaultConfig 属性传递 excludeKeys 或 insertKeys。