如何从tinymce 4.x中的窗口（弹出窗口）访问元素

Question

我为tinymce编写了一个插件，该插件打开一个由URL加载的弹出窗口（它将弹出窗口创建为iframe）。当我单击此窗口中的按钮时，我想从此弹出窗口访问元素值（此元素是具有图像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();

这是一个基本示例，显示了如何href从a标签中获取属性并使用它来构建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文档未在“创建自定义对话框”中明确描述插入内容，但该示例隐含了显示如何activeEditor使用native window.top属性在顶部框架中访问的示例。

另外值得注意的是，它window.top具有只读的 跨域访问权限。要具有读/写访问权限，您必须遵守同源政策。