TinyMCE 4自定义文件选择器：弹窗返回值实现疑问

我明白你现在的困扰：已经通过file_picker_callback打开了自定义的文件选择弹窗，但不知道怎么把选中的文件信息传回主编辑器。其实核心是利用TinyMCE的窗口管理器API，在弹窗页面里调用主页面传递过来的回调函数，就能把值传回去了，具体步骤如下：

1. 完善主页面的弹窗初始化代码 #

首先确保你在主页面的TinyMCE配置里正确设置了文件选择回调，并且打开弹窗时把必要的参数传递过去：

tinymce.init({
  // 你的其他编辑器配置
  file_picker_callback: function(callback, value, meta) {
    imageFilePicker(callback, value, meta);
  }
});

var imageFilePicker = function(callback, value, meta) {
  tinymce.activeEditor.windowManager.open({
    title: 'Photo picker',
    url: "files-list.html",
    width: window.innerWidth * 0.8,
    height: window.innerHeight * 0.8,
    // 这里把回调函数和元数据传给弹窗页面
    params: {
      callback: callback,
      meta: meta
    },
    buttons: [{
      text: '取消',
      onclick: function() {
        tinymce.activeEditor.windowManager.close();
      }
    }]
  });
};

2. 在弹窗页面（files-list.html）处理文件选择逻辑 #

在你的文件列表页面里，当用户点击选中某个文件/图片时，需要调用主页面传递过来的callback函数，把选中的URL传回去，然后关闭弹窗：

<!DOCTYPE html>
<html>
<head>
  <title>文件选择器</title>
  <script>
    // 绑定文件选择事件，比如点击图片时触发
    function selectFile(selectedUrl) {
      // 获取主页面传过来的回调和元数据
      const { callback, meta } = parent.tinymce.activeEditor.windowManager.getParams();
      
      // 如果是图片类型，还可以传递alt文本等额外信息
      if (meta.filetype === 'image') {
        callback(selectedUrl, {
          alt: '这里填写图片的描述文本'
        });
      } else {
        // 非图片文件直接传递URL即可
        callback(selectedUrl);
      }
      
      // 关闭弹窗
      parent.tinymce.activeEditor.windowManager.close();
    }
  </script>
</head>
<body>
  <!-- 示例：假设这是你的文件列表，每个项绑定selectFile函数 -->
  <div class="photo-item" onclick="selectFile('/uploads/image1.jpg')">
    <img src="/uploads/image1.jpg" alt="示例图片1" />
  </div>
  <div class="photo-item" onclick="selectFile('/uploads/image2.jpg')">
    <img src="/uploads/image2.jpg" alt="示例图片2" />
  </div>
</body>
</html>

关键知识点 #

• 弹窗页面通过parent.tinymce.activeEditor.windowManager.getParams()可以拿到主页面打开弹窗时传递的所有参数，包括我们需要的callback函数。
• 调用callback(selectedUrl)后，TinyMCE会自动把这个URL填充到对应的编辑器输入框（比如图片插入对话框的src字段）。
• 最后一定要调用windowManager.close()关闭弹窗，完成整个选择流程。

内容的提问来源于stack exchange，提问作者Petr Lukáš