how to access element from a window (popup) in tinymce 4.x

Question

I have written a plugin for tinymce which opens a popup that gets loaded by url (it is creating the popup as an iframe). When I click on a button in this window, I want to access an element value from this popup (this element is an anchor tag which has url for an image) and load that as an image in the tinymce editor. How can I do this?

My plugin code:

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

From the iframe, use top to access parent frame

You're already doing this to close the window:

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

So, you should be able to use the same pattern to update the active editor in the parent window:

top.tinymce.activeEditor.insertContent();

Here is a basic example showing how you could get the href attribute from your a tag and use it to build an img tag that you can insert into the parent window's active editor:

...
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();
    }
}]
...

Though inserting content is not explicitly described by the TinyMCE documentation on "Creating custom dialogs", it is implied with the example showing how to access activeEditor in the top frame using the native window.top property.

Also worth noting is that window.top has read-only cross-origin access. To have read/write access, you will have to comply with same-origin policy.

Answer 2

I will assume you have jQuery loaded to simplify the code

The event object (e) contains a property currentTarget which is a reference on the popup opened.

This popup contains an iframe with the page you opend in it. We can find it with jQuery : var frame = $(e.currentTarget).find("iframe").get(0) This line will return the Dom dom object of the iframe

Then you want to access the content of your iframe : var content = frame.contentDocument (Be careful when doing this you must follow the same origin policy)

Now you just have to find the element you need : var result =$(content).find("#theElementINeed")

I hope it helped you