Accessing Data From TinyMCE Plugin

Question

I'm trying to create a simple plugin for TinyMCE that can pass a value back for insertion into the editor. Due to my requirements I need to use a custom looking window.

I've tried to stick close to the tutorials however I can't find a way to get the data from the plugin in the onsubmit callback.

Here is a simplified plugin.js

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

editor.addButton('imageselect', {
    text: 'Add Image',
    onclick: function() {
        editor.windowManager.open({
    id: "imageselect",
            title: 'Add New Image',
            url: '/photos/thumbs',
            width: 800,
            height: 600,
            buttons: [{
                text: 'Select Image',
                onclick: 'submit'
            }],
       onsubmit: function(e) {
       editor.insertContent(e.data.selected_image);
    }
        });
    }
});

});

I've also added a route and view in my application to render the custom window. It shows up great.

<div id="thumb_container">
    <input type="textbox" name="selected_image" value="foobar" />
    <% @photos.each do |p| %>
        <div style="float: left; margin: 1em;">
            <%= image_tag p.image.url(:thumb), class: "thumb img-polaroid" %> <br />
        </div>
    <% end %>
</div>

My idea is to write some javascript in this view to fill in the value of the textbox with the name selected_image. I then want to get that value when this window closes and append it to the editor.

The problem is when the editor closes and my callback for onsubmit is executed e.data.selected_image evaluates to undefined.

What piece of wiring am I missing to get this working?

Answer 1

So I dug into this a little further and wanted to report back my solution incase anyone else has the same problem down the road.

What I needed to do was add some TinyMCE javascript to my custom window. I then added an event handler to update the editor.

The code snippet below can be used to access the editor from within my custom page.

window.parent.tinyMCE.activeEditor.execCommand( 'mceInsertContent', 0, selected_image );
tinyMCEPopup.close();

I'm not entirely sure if this is the best way to handle things and would be open to other solutions and suggestions before accepting my own answer to this.