TinyMCE 5升级至6后自定义插件配置读取及options调用异常问题

核心原因 #

TinyMCE 6 重构了整个选项系统，和5代的逻辑完全不兼容：

• 所有非官方内置的自定义配置项，必须提前注册，才会被选项系统识别，直接在tinymce.init()里传自定义参数，不会自动加入可读取的选项列表，所以不管怎么调get都返回undefined
• 5代的editor.settings对象已经被废弃，不再同步更新init传入的配置
• 配置是和单个编辑器实例绑定的，直接调用全局tinymce.options.get()本身就是错误用法，全局对象上根本没有单实例的配置数据

具体修复步骤 #

第一步：提前注册所有自定义配置项 #

注册逻辑必须写在tinymce.init()执行之前，注册后选项系统才会识别你的自定义参数：

// 注册自定义配置项，支持多类型校验
tinymce.EditorManager.options.register('external_filemanager_path', {
  // 配置值类型校验，支持string/number/boolean/object/function，也可以传自定义校验函数
  processor: 'string',
  // 配置默认值，init没传该参数时返回这个值
  default: ''
});
// 有多个自定义配置就挨个注册即可

注册完成后，在插件代码、编辑器生命周期钩子中，调用当前编辑器实例的editor.options.get('external_filemanager_path')就能正常拿到传入的配置值。

第二步：修正回调场景的读取逻辑 #

你写的回调场景代码存在用法错误，改完就能正常读：

1. 不要用全局tinymce对象读配置，多编辑器实例场景下全局对象无法区分你要读哪个实例的参数
2. 回调函数内的this指向就是当前编辑器实例，把实例传到工具函数里再读配置即可

修正后的代码：

tinymce.init({
  selector: '#textarea',
  external_filemanager_path: 'xyz',
  file_picker_callback: function (cb, value, meta) {
    // 这里的this就是当前触发回调的编辑器实例
    openmanager(this);
  }
});

function openmanager(editor) {
  // 从传入的编辑器实例上读取配置
  const filePath = editor.options.get('external_filemanager_path');
  // 后续逻辑正常写即可
}

旧插件快速兼容方案 #

如果手上的旧插件自定义配置项太多，不想挨个注册走新API，可以直接调用官方兼容API读原始配置，不用走注册流程，效果和5代的editor.settings完全一致：

// 一行代码兼容5代的editor.settings.xxx写法
const configVal = editor.getParam('external_filemanager_path');

提示：editor.getParam()是官方暴露的公开兼容API，比读内部私有属性稳定，适配旧插件时优先用这个方法。

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