EditorJS 动态工具栏标题与图标配置指南

理解EditorJS工具配置机制

EditorJS作为一款模块化的块编辑器，其强大的自定义能力允许开发者创建可复用的内容块工具。在实际开发中，我们经常需要为同一个工具创建多个实例，每个实例可能需要显示不同的工具栏标题和图标。

问题背景

在开发SimpleButton插件时，开发者希望实现以下功能：

• 同一个SimpleButton类可以被多次复用
• 每个实例可以拥有独立的工具栏显示名称
• 每个实例可以配置不同的图标

解决方案详解

EditorJS提供了通过工具配置覆盖静态toolbox定义的能力。具体实现方式如下：

基础配置方法

在初始化EditorJS实例时，可以通过tools配置项为每个工具指定自定义的toolbox属性：

const editor = new EditorJS({
  tools: {
    simpleButtonTwo: {
      class: SimpleButton,
      toolbox: {
        title: '自定义标题1',
        icon: '<svg>...</svg>'
      },
      config: { title: 'body', component_id: 'header' }
    },
    simpleButtonThree: {
      class: SimpleButton,
      toolbox: {
        title: '自定义标题2',
        icon: '<svg>...</svg>'
      },
      config: { title: 'body', component_id: 'body' }
    }
  }
});

实现原理

1. 优先级机制：EditorJS在渲染工具栏时，会优先使用实例化时提供的toolbox配置，如果未提供，则回退到工具类中定义的静态toolbox属性。

2. 动态绑定：通过这种配置方式，可以实现同一个工具类在不同实例中显示不同的名称和图标，而不需要修改工具类本身的代码。

3. 配置继承：除了title和icon外，toolbox配置中的其他属性（如展示顺序、分组等）也可以被覆盖。

最佳实践建议

1. 保持工具类简洁：在工具类中定义默认的toolbox配置，但不强制要求必须使用这些默认值。

2. 提供配置文档：如果开发的是第三方工具，应在文档中明确说明支持哪些toolbox属性的覆盖。

3. 图标处理：对于动态图标，建议：

   • 使用SVG字符串直接嵌入
   • 或者提供图标名称，由前端框架动态加载

4. 多语言支持：如果需要国际化，可以在实例化时根据当前语言环境动态设置title。

常见问题排查

如果发现配置未生效，可以检查以下方面：

1. 确保配置层级正确，toolbox应该与class和config同级
2. 验证是否有多处配置冲突（如工具类中可能有强制覆盖）
3. 检查控制台是否有相关错误提示
4. 确认EditorJS版本是否支持此特性

通过合理利用EditorJS的工具配置机制，开发者可以创建高度灵活、可复用的内容块工具，满足各种复杂的编辑场景需求。