Tinymce如何在初始化阶段或完成后新增或修改配置属性？

错误原因说明 #

你原有写法无法运行是因为 JavaScript 不允许在对象字面量内部直接书写 if 条件语句，动态配置可以通过以下两种方案实现：

方案1：初始化前构造动态配置对象（推荐） #

这种方式性能最优，不需要编辑器做二次渲染，适合初始化前就已经拿到外部变量的场景。

写法1：先声明基础配置，再按条件追加属性

// 定义固定基础配置
const tinyMceBaseConfig = {
  selector: '.tinymce-texteditor',
  plugins: 'code',
  height: 500
  // 其他不需要动态调整的配置
};

// 按外部变量动态修改/追加配置
if (!canEdit) {
  tinyMceBaseConfig.menubar = false;
  tinyMceBaseConfig.toolbar = false;
  tinyMceBaseConfig.readonly = true; // 附加只读配置避免内容被修改，更稳妥
}

// 传入配置完成初始化
tinymce.init(tinyMceBaseConfig);

写法2：使用ES6条件展开语法（更简洁）

可以直接在init的配置对象内完成动态判断，不需要拆分配置：

tinymce.init({
  selector: '.tinymce-texteditor',
  plugins: 'code',
  height: 500,
  // 条件展开动态配置
  ...(!canEdit ? { menubar: false, toolbar: false, readonly: true } : {})
  // 其他固定配置
});

方案2：初始化完成后动态修改配置 #

如果外部变量是在编辑器初始化之后才发生变化，可以调用Tinymce官方API修改运行时状态：

切换为不可编辑状态

// 获取编辑器实例
const editor = tinymce.get('.tinymce-texteditor');
if (editor) {
  // 隐藏菜单栏
  editor.ui.registry.getAll().menus.forEach(menu => menu.hide());
  // 隐藏工具栏
  editor.ui.registry.getAll().toolbars.forEach(toolbar => toolbar.hide());
  // 开启只读模式
  editor.setMode('readonly');
}

切回可编辑状态

const editor = tinymce.get('.tinymce-texteditor');
if (editor) {
  // 展示菜单栏
  editor.ui.registry.getAll().menus.forEach(menu => menu.show());
  // 展示工具栏
  editor.ui.registry.getAll().toolbars.forEach(toolbar => toolbar.show());
  // 关闭只读模式
  editor.setMode('design');
}

注意

如果需要修改的配置是需要初始化时加载的项（比如插件列表、自定义菜单、快捷键规则等），运行时修改不生效，需要先销毁原有实例再用新配置重新初始化：

// 先销毁已有编辑器实例
if (tinymce.get('.tinymce-texteditor')) {
  tinymce.remove('.tinymce-texteditor');
}
// 传入新配置重新初始化
tinymce.init(newTinyMceConfig);

内容的提问来源于stack exchange，提问作者Duddy67