javascript - 是否可以从 TinyMCE 4 中的自定义窗口返回内容？

Question

与许多其他人一样，由于 TinyMCE 图像插件的局限性，我决定采取创建一个与我网站自己的上传系统相关联的方法。

我已经让这部分工作并拉出一个单独的页面，专为此目的而设计。但是，现在我想通过在此页面上选择图像来返回内容。这是可能的还是我走进了死胡同？

tinymce.PluginManager.add('imageLoader', function(editor, url) {    
    // Adds a menu item to the tools menu

    editor.addButton('imageLoader', {
    icon: 'mce-ico mce-i-link',
    image: 'Photos.png',
    onclick: function() {
      // Open window
      editor.windowManager.open({
        title: 'Image Loader',
        url: 'load_images',
        width: 500,
        height: 400,
        onsubmit: function(e) {
          // Insert content when the window form is submitted
          editor.insertContent('Image To Insert');
        }
      });
    }
    });

    return {
        getMetadata: function () {
            return  {
            name: "Image Loader"
            };
        }
    };  
});

Answer 1

我们在 TinyMCE 5 中使用新的 URL 对话框 api 使这变得容易得多:

https://www.tiny.cloud/docs/ui-components/urldialog/

在版本 4 中，我相信通常的技术是(在 iframe 内)通过 window.parent.tinymce.activeEditor 访问打开对话框的 TinyMCE 实例，然后在那里复制 onsubmit 函数.使用编辑器实例，您可以插入任何您需要的内容，然后 editor.windowManager.close() 将关闭最顶层的窗口(即 url 对话框)。

对于更高级的用例，editor.windowManager.getParams() 可用于在插件和对话框之间传递信息，尽管可能不是从对话框到插件。 editor.plugins 是另一种可能的技术，它是事件插件实例的名称/值对象(它是对 PluginManager.add init 函数的返回值的实时引用，它可以在运行时发生变异)。

这些都相当复杂，但可能比从您的插件中搜索对话框 iframe 更可靠。