在Vue3中使用wangEditor获取工具栏配置的实践指南

wangEditor作为一款流行的富文本编辑器，在Vue3项目中被广泛使用。本文将详细介绍如何在Vue3环境中获取wangEditor工具栏的默认配置，特别是菜单组的分组和排序信息。

获取工具栏配置的时机问题

在Vue3项目中，开发者常常会遇到这样的需求：需要获取wangEditor工具栏的当前配置，包括菜单项的排序和分组情况。然而，直接在编辑器创建完成的回调函数中尝试获取这些信息可能会遇到问题。

这是因为wangEditor的初始化是一个异步过程，工具栏的完整配置在编辑器刚创建时可能还未完全准备好。此时调用toolbar.getConfig().toolbarKeys可能无法获取到预期的结果。

正确的获取方式

经过实践验证，在编辑器失去焦点的事件回调中获取工具栏配置是一个可靠的方法。这是因为：

1. 失去焦点事件发生时，编辑器已经完全初始化完成
2. 工具栏配置已经稳定加载
3. 此时获取的配置信息是最新且完整的

具体实现代码如下：

// 在模板中绑定onBlur事件
<wang-editor @onBlur="handleBlur" />

// 在methods中定义处理函数
const handleBlur = () => {
  const editor = editorRef.value;
  const toolbar = DomEditor.getToolbar(editor);
  console.log('当前工具栏配置:', toolbar.getConfig().toolbarKeys);
}

工具栏配置的结构解析

获取到的toolbarKeys配置是一个数组，它完整反映了工具栏的当前状态：

• 数组中的字符串代表单个菜单项的key
• 数组中的空字符串''代表菜单分组的分隔线
• 数组顺序即为工具栏上菜单项的实际显示顺序

通过分析这个数组，开发者可以：

1. 了解默认的菜单分组情况
2. 掌握各菜单项的顺序排列
3. 为自定义工具栏配置提供参考基准

实际应用场景

获取工具栏配置在实际开发中有多种用途：

1. 自定义工具栏：在修改默认工具栏前，先获取原始配置作为参考
2. 动态调整：根据用户权限动态显示/隐藏某些菜单项
3. 状态保存：保存用户自定义的工具栏配置以便下次恢复
4. 功能扩展：在特定菜单组前后插入自定义功能按钮

注意事项

1. 确保在编辑器实例完全初始化后再获取配置
2. 不同版本wangEditor的工具栏默认配置可能略有差异
3. 修改配置后需要调用相应方法更新工具栏显示
4. 在生产环境中建议将配置获取逻辑封装为可复用函数

通过本文介绍的方法，开发者可以轻松获取wangEditor工具栏的完整配置信息，为后续的编辑器定制和功能扩展打下坚实基础。