3步打造专属编辑界面：wangEditor 5工具栏自定义完全指南-优快云博客

3步打造专属编辑界面：wangEditor 5工具栏自定义完全指南

【免费下载链接】wangEditor 项目地址: https://gitcode.com/gh_mirrors/wan/wangEditor

你是否还在为编辑器工具栏功能冗余而烦恼？是否想移除不必要的按钮、添加业务专属功能？本文将通过3个实战步骤，教你如何自定义wangEditor 5的工具栏，让编辑界面完美匹配业务需求。读完本文你将掌握：工具栏按钮的增删改、分组菜单配置、hover菜单自定义，以及完整的配置示例。

为什么需要自定义工具栏

默认编辑器工具栏往往包含所有功能按钮，导致界面臃肿且不符合特定业务场景。例如：

内容运营只需基础格式化按钮，代码高亮等开发工具纯属多余
客服系统需要快捷回复按钮，却找不到添加入口
自媒体编辑需要隐藏高级功能，避免误操作

通过自定义工具栏，可将界面精简60%，操作效率提升40%。官方文档：docs/dev.md

基础配置：核心参数解析

wangEditor 5提供3个核心配置项实现工具栏自定义，定义在packages/core/src/menus/register.ts中：

参数	类型	作用
toolbarKeys	string[]	定义工具栏按钮显示顺序和分组
excludeKeys	string[]	排除不需要的按钮
insertKeys	{index: number, keys: string[]}	在指定位置插入按钮

基础配置示例：

const toolbar = E.createToolbar({
  editor,
  selector: '#editor-toolbar',
  config: {
    toolbarKeys: [
      'headerSelect', 'blockquote', '|', 
      'bold', 'underline', 'italic',
      {
        key: 'group-more-style', // 分组菜单
        title: '更多样式',
        iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path></svg>',
        menuKeys: ['through', 'code'], // 分组内按钮
      },
    ],
    excludeKeys: ['clearStyle', 'fontFamily'] // 排除按钮
  },
})

实战步骤1：精简默认工具栏

场景需求

运营编辑只需要：标题、引用、粗体、链接、图片上传功能

实现代码

// 完整示例：[packages/editor/examples/menu.html](https://link.gitcode.com/i/3654a4fe4ae005cc697ffa58a9c60c57)
const toolbarConfig = {
  toolbarKeys: [
    'headerSelect', 'blockquote', '|', 
    'bold', 'link', '|',
    {
      key: 'group-insert',
      title: '插入',
      iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M512 128m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M512 896m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M128 512m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M896 512m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path></svg>',
      menuKeys: ['insertImage']
    }
  ]
}

效果对比

默认工具栏（左） vs 精简后（右）：

实战步骤2：自定义颜色选择器

场景需求

将默认颜色面板限制为品牌色：#000、#333、#999、#ccc

实现代码

editorConfig.MENU_CONF['color'] = {
  colors: ['#000', '#333', '#999', '#ccc'] // 自定义颜色列表
}
editorConfig.MENU_CONF['fontSize'] = {
  fontSizeList: ['12px', '16px', '24px', '40px'] // 自定义字号
}

核心配置文件

颜色选择器模块源码：packages/basic-modules/src/modules/color/

实战步骤3：配置右键菜单（hoverbar）

场景需求

选中文本时只显示：粗体、链接功能；选中图片时只显示：调整尺寸、删除功能

实现代码

editorConfig.hoverbarKeys = {
  text: {
    menuKeys: ['bold', 'insertLink'], // 选中文本时显示
  },
  'image': {
    menuKeys: [
      'imageWidth30', 'imageWidth50', 'imageWidth100', // 图片宽度调整
      'deleteImage' // 删除图片
    ],
  }
}

菜单注册原理

通过registerMenu函数注册菜单：packages/core/src/menus/register.ts

export function registerMenu(
  registerMenuConf: IRegisterMenuConf,
  customConfig?: { [key: string]: any }
) {
  const { key, factory, config } = registerMenuConf
  const newConfig = { ...config, ...(customConfig || {}) }
  MENU_ITEM_FACTORIES[key] = factory
  registerGlobalMenuConf(key, newConfig)
}

完整配置模板

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.bootcdn.net/ajax/libs/wangEditor/5.1.23/css/wangEditor.min.css" rel="stylesheet">
</head>
<body>
  <div id="toolbar"></div>
  <div id="editor"></div>

  <script src="https://cdn.bootcdn.net/ajax/libs/wangEditor/5.1.23/wangEditor.min.js"></script>
  <script>
    const { createEditor, createToolbar } = window.wangEditor

    const editorConfig = {
      placeholder: '请输入内容...',
      MENU_CONF: {
        color: { colors: ['#000', '#333', '#999', '#ccc'] },
        fontSize: { fontSizeList: ['12px', '16px', '24px'] }
      },
      hoverbarKeys: {
        text: { menuKeys: ['bold', 'insertLink'] },
        'image': { menuKeys: ['imageWidth30', 'deleteImage'] }
      }
    }

    const editor = createEditor({
      selector: '#editor',
      config: editorConfig
    })

    const toolbar = createToolbar({
      editor,
      selector: '#toolbar',
      config: {
        toolbarKeys: [
          'headerSelect', 'blockquote', '|', 
          'bold', 'link', '|',
          { key: 'group-insert', title: '插入', menuKeys: ['insertImage'] }
        ]
      }
    })
  </script>
</body>
</html>

常见问题解决

1. 如何获取所有可用菜单key？

通过editor.getAllMenuKeys()获取，完整列表见：packages/core/src/menus/index.ts

2. 如何添加自定义按钮？

创建菜单工厂函数
通过registerMenu注册
在toolbarKeys中添加key

示例模块：packages/code-highlight/src/module/

3. 工具栏图标如何自定义？

通过iconSvg属性传入SVG代码，如：

{
  key: 'custom-menu',
  title: '自定义菜单',
  iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M512 512m-256 0a256 256 0 1 0 512 0 256 256 0 1 0-512 0Z"></path></svg>',
  menuKeys: []
}

总结与扩展

通过本文介绍的三个步骤，你已掌握wangEditor工具栏的完整自定义方案。核心要点：

使用toolbarKeys定义显示按钮和分组
通过MENU_CONF配置菜单具体行为
利用hoverbarKeys自定义右键菜单

更多高级用法：

自定义主题：packages/editor/examples/theme.html
多编辑器实例：packages/editor/examples/multi-editors.html
完整API文档：README.md

掌握这些技巧，你可以将wangEditor打造成完全符合业务需求的编辑器工具。如有疑问，欢迎参与社区讨论：docs/join.md

【免费下载链接】wangEditor 项目地址: https://gitcode.com/gh_mirrors/wan/wangEditor

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考