如何从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标记＆＃39 ; s主动编辑：

...
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"未明确说明插入内容，但示例显示如何使用原生window.top属性访问顶部框架中的activeEditor。

另外值得注意的是window.top 只读 cross-origin access。要进行读/写访问，您必须遵守same-origin policy。

Answer 2

我假设您已加载jQuery以简化代码

事件对象（e）包含一个属性currentTarget，它是打开的弹出窗口的引用。

此弹出窗口包含一个iframe，其中包含您打开的页面。我们可以用jQuery找到它： var frame = $(e.currentTarget).find("iframe").get(0) 该行将返回iframe的Dom dom对象

然后您想要访问iframe的内容： var content = frame.contentDocument （这样做时要小心，你必须遵循same origin policy）

现在你必须找到你需要的元素： var result =$(content).find("#theElementINeed")

我希望它能帮到你