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

iframe, javascript, tinymce-4

Solution

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.

Problem

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

Original source