升级TinyMCE至6.x后settings不可用，如何动态添加工具栏？

云原生阿岚

2026-8-7

在TinyMCE 6.x中动态添加工具栏的方法

TinyMCE 6重构了编辑器的配置管理逻辑，原5.x版本直接操作settings属性的方式不再适用，需要通过官方提供的API完成动态修改。以下是具体实现步骤：

1. 获取编辑器实例

和5.x版本一致，先获取目标编辑器的实例：

const tinyMceInstance = tinymce.get('tinymceid');

2. 动态加载依赖插件

如果要添加的功能依赖特定插件（比如image插件），需要先通过plugins.load()方法加载插件，该方法返回Promise，建议用异步方式处理：

// 异步加载image插件
await tinyMceInstance.plugins.load('image');

3. 修改工具栏配置并刷新

TinyMCE 6的工具栏配置通过options对象管理，修改后需要调用toolbar.refresh()使更改生效：

情况1：工具栏为数组格式（推荐）

如果初始化时工具栏配置为数组结构（如toolbar: [/* 分组配置 */]），直接修改对应组的items即可：

// 获取当前工具栏配置
const toolbar = tinyMceInstance.options.get('toolbar');

// 向第4组（索引4）添加image按钮
if (toolbar[4]) {
  toolbar[4].items.push('image');
  // 更新配置
  tinyMceInstance.options.set('toolbar', toolbar);
  // 刷新工具栏
  tinyMceInstance.ui.toolbar.refresh();
}

情况2：工具栏为字符串格式

如果初始化时工具栏是字符串（如toolbar: 'undo redo | bold italic'），需要先转换为数组结构再修改：

let toolbar = tinyMceInstance.options.get('toolbar');

// 将字符串格式转为数组结构
if (typeof toolbar === 'string') {
  toolbar = toolbar.split('|').map(group => ({
    items: group.trim().split(' ').filter(item => item) // 过滤空字符串
  }));
}

// 向第4组添加image按钮
if (toolbar[4]) {
  toolbar[4].items.push('image');
  tinyMceInstance.options.set('toolbar', toolbar);
  tinyMceInstance.ui.toolbar.refresh();
}