javascript - 如何从 tinymce 4.x 中的窗口(弹出窗口)访问元素

Question

我为 tinymce 编写了一个插件，它打开一个由 url 加载的弹出窗口(它将弹出窗口创建为 iframe)。当我点击这个窗口中的一个按钮时，我想从这个弹出窗口访问一个元素值(这个元素是一个 anchor 标记，它有一个图像的 url)并将它作为一个图像加载到 tinymce 编辑器中。我该怎么做？

我的插件代码:

tinymce.PluginManager.add('fileuploader', function(editor, url) {

    editor.addButton('fileuploader', {
        text: 'Upload Image',
        icon: false,
        onclick: function() {
            // Open window with a specific url
            editor.windowManager.open({
                title: 'Upload Image',
                url: 'http://localhost:8080/upload-file',
                width: 500,
                height: 100,
                buttons: [{
                    text: 'Done',
                    onclick: function(e) {
                        editor.insertContent('Title: ' + document.getElementById("fileUrl"));
                        top.tinymce.activeEditor.windowManager.close();
                    }
                }]
            });
        }
    });

Answer 1

在 iframe 中，使用 top 访问父框架

您已经这样做来关闭窗口:

top.tinymce.activeEditor.windowManager.close();

因此，您应该能够使用相同的模式来更新父窗口中的事件编辑器:

top.tinymce.activeEditor.insertContent();

这是一个基本示例，展示了如何从 a 标签中获取 href 属性，并使用它来构建一个 img 标签您可以插入到父窗口的事件编辑器中:

...
buttons: [{
    text: 'Done',
    onclick: function(e) {
        var fileURL = document.getElementById("fileUrl").href,
            imgHTML = '<img src="' + fileURL + '" />';

        top.tinymce.activeEditor.insertContent(imgHTML);
        top.tinymce.activeEditor.windowManager.close();
    }
}]
...

虽然 TinyMCE documentation on "Creating custom dialogs" 没有明确描述插入内容, 它隐含在显示如何使用 native window.top 访问顶部框架中的 activeEditor 的示例中属性(property)。

另外值得注意的是 window.top 具有只读 cross-origin access .要拥有读/写 权限，您必须遵守 same-origin policy .