TinyMCE v4升级v6后getParams()移除的替代方案咨询

核心变动说明 #

• v6版本已完全移除getParams()方法，同时废弃了openUrl(config, params)的双参数传参形式，所有配置统一收敛到第一个配置对象中
• v6完全支持在openUrl配置中传入自定义属性、方法，不需要额外引入其他跨窗口通信方案
• v6中打开的iframe弹窗，需要通过弹窗实例的getConfig()方法获取传入的全量配置

代码修改步骤 #

1. 修正父页面openUrl调用逻辑 #

移除原有第二个入参，将自定义的oninsert回调直接挂在openUrl的根配置对象上即可，可选增加自定义标识避免弹窗实例匹配错误：

// tinymce.init 部分无需改动，保持原有配置即可
function myImagePicker(callback, value, meta) {
  tinymce.activeEditor.windowManager.openUrl({
    title: 'Image Browser',
    url: '/FileManager/Picker?type=' + meta.filetype,
    width: window.innerWidth - 200,
    height: 600,
    // 自定义标识，可选，用于子窗口精准匹配弹窗实例
    dialogFlag: 'customImagePicker',
    // 自定义回调直接挂载在配置根节点，v6可正常识别
    oninsert: function (url, objVals) {
      callback(url, objVals);
      // 回调执行完成后关闭弹窗
      tinymce.activeEditor.windowManager.close();
    }
  });
}

注意：不要将函数类引用类型数据放在params字段下，该字段仅用于传递可序列化的基础类型参数，会做结构化克隆处理，传入函数会直接丢失。

2. 修正子窗口（文件选择页）的回调触发逻辑 #

废弃原有getParams()调用，改为从windowManager的弹窗实例列表中匹配当前图片选择弹窗，通过getConfig()拿到自定义回调执行：

// 用户选中图片后执行以下逻辑
const editor = top.tinymce.activeEditor;
const dialogList = editor.windowManager.windows;
// 匹配到当前打开的图片选择弹窗
const currentDialog = dialogList.find(dialog => dialog.getConfig().dialogFlag === 'customImagePicker');
// 执行回调传入图片地址和参数
currentDialog.getConfig().oninsert(url, objVals);

如果业务场景中不会同时打开多个TinyMCE弹窗，也可以简化写法，直接取弹窗列表最后一项：

const dialogList = top.tinymce.activeEditor.windowManager.windows;
const currentDialog = dialogList[dialogList.length - 1];
currentDialog.getConfig().oninsert(url, objVals);

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