Vue2 + wangEditor：像搭积木一样定制你的编辑器工具栏

每次看到那些千篇一律的编辑器工具栏，总有种被束缚的感觉。为什么我们非得忍受那些用不上的功能？wangEditor给了我们一把钥匙，让我们可以像搭积木一样自由组合工具栏。今天，我们就来聊聊如何用Vue2和wangEditor打造一个真正符合业务需求的编辑器。

1. 为什么需要自定义工具栏？

想象一下，你正在开发一个内部博客系统。大多数编辑场景下，用户只需要基础的文本格式功能——加粗、斜体、标题、列表。那些复杂的表格、代码块、上传视频功能，90%的时间都在工具栏上吃灰。

wangEditor的 toolbarConfig 配置项正是为解决这个问题而生。通过 toolbarKeys 和 excludeKeys ，我们可以：

• 精简界面 ：只保留真正需要的功能按钮
• 提升性能 ：减少不必要的功能加载
• 增强体验 ：让编辑器更贴合业务场景

2. 基础配置：从零开始搭建工具栏

让我们先创建一个最基本的Vue2组件来集成wangEditor：

<template>
  <div class="editor-container">
    <Toolbar 
      :editor="editor" 
      :defaultConfig="toolbarConfig"
      mode="default"
    />
    <Editor
      v-model="html"
      :defaultConfig="editorConfig"
      mode="default"
    />
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

export default {
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      html: '',
      toolbarConfig: {
        toolbarKeys: [
          'bold',
          'italic',
          'underline',
          '|',  // 分隔线
          'headerSelect',
          'blockquote'
        ]
      },
      editorConfig: { placeholder: '开始编辑...' }
    }
  },
  beforeDestroy() {
    if (this.editor) this.editor.destroy()
  }
}
</script>

这个配置创建了一个极简的工具栏，只包含最常用的几个功能。注意到 toolbarKeys 数组中的 | 了吗？它会在工具栏上显示为一条分隔线，帮助我们更好地组织按钮。

3. 高级定制：打造专属工具栏

3.1 隐藏不需要的功能

有时候，与其指定要显示什么，不如指定要隐藏什么。 excludeKeys 就是为此设计的：

toolbarConfig: {
  excludeKeys: [
    'fullScreen',
    'insertTable',
    'insertVideo',
    'codeBlock',
    'emotion'
  ]
}

这样配置后，编辑器会显示所有功能，除了我们明确排除的这些。这种方式特别适合当你想要保留大部分功能，只是去掉几个明显不需要的选项时使用。

3.2 创建自定义按钮组

wangEditor允许我们将相关功能分组，创建更整洁的工具栏：

toolbarConfig: {
  toolbarKeys: [
    'bold',
    'italic',
    {
      key: 'group-text-style',
      title: '更多样式',
      iconSvg: '<svg>...</svg>',
      menuKeys: ['underline', 'through', 'color', 'bgColor']
    },
    '|',
    'headerSelect'
  ]
}

这个配置创建了一个"更多样式"的下拉菜单，包含了文字相关的各种样式选项。 iconSvg 属性允许我们自定义按钮的图标，让工具栏更符合产品设计语言。

3.3 动态切换工具栏

在某些场景下，我们可能需要根据用户角色或内容类型动态调整工具栏：

methods: {
  setToolbarForSimpleMode() {
    this.toolbarConfig.toolbarKeys = [
      'bold',
      'italic',
      'headerSelect'
    ]
  },
  
  setToolbarForAdvancedMode() {
    this.toolbarConfig.toolbarKeys = [
      'bold',
      'italic',
      'underline',
      'headerSelect',
      'blockquote',
      'insertTable'
    ]
  }
}

通过方法动态修改 toolbarConfig.toolbarKeys ，我们可以实现工具栏的实时切换，无需重新初始化编辑器。

4. 实战案例：三种业务场景的工具栏配置

4.1 内部博客系统

对于内部博客，我们通常需要简洁的写作体验：

toolbarConfig: {
  toolbarKeys: [
    'headerSelect',
    'bold',
    'italic',
    'blockquote',
    'bulletedList',
    'numberedList',
    'insertLink',
    'insertImage',
    '|',
    'undo',
    'redo'
  ]
}

4.2 电商商品详情编辑器

商品详情需要更丰富的样式选项：

toolbarConfig: {
  toolbarKeys: [
    'headerSelect',
    'bold',
    'italic',
    'color',
    'bgColor',
    '|',
    'bulletedList',
    'numberedList',
    '|',
    'insertImage',
    'insertTable',
    '|',
    'undo',
    'redo'
  ]
}

4.3 技术文档编辑器

技术写作需要代码块和特殊格式支持：

toolbarConfig: {
  toolbarKeys: [
    'headerSelect',
    'bold',
    'italic',
    'code',
    'codeBlock',
    'blockquote',
    '|',
    'bulletedList',
    'numberedList',
    '|',
    'insertLink',
    'insertImage',
    '|',
    'undo',
    'redo'
  ]
}

5. 性能优化与最佳实践

5.1 按需加载编辑器模块

wangEditor支持模块化加载，我们可以只引入需要的功能：

import { Boot } from '@wangeditor/editor'
import { boldModule } from '@wangeditor/plugin-basic-modules'

Boot.registerModule(boldModule)
// 只注册加粗模块，其他功能都不会被加载

这种方式能显著减小打包体积，特别适合对性能要求苛刻的项目。

5.2 工具栏配置的维护技巧

随着项目发展，工具栏配置可能会变得复杂。我建议：

1. 将配置抽离为单独文件 ：便于团队协作和维护
2. 使用配置生成器 ：创建可视化工具来生成配置代码
3. 添加详细注释 ：说明每个选项的业务用途

5.3 常见问题排查

• 图标不显示 ：检查SVG格式是否正确，或者尝试使用内置图标
• 配置不生效 ：确保没有同时使用 toolbarKeys 和 excludeKeys
• 性能问题 ：检查是否加载了不必要的模块

6. 超越工具栏：更深入的定制

工具栏定制只是开始。wangEditor还允许我们：

• 自定义下拉菜单内容
• 添加全新的工具栏按钮
• 修改编辑器的默认行为
• 创建全新的内容块类型

这些高级定制需要更深入的研究，但对于打造真正独特的编辑体验至关重要。