How to use TinyMCE custom button, with custom dialog, to add content?

TinyMCE editor lets you assign a custom button to its editor toolbar. I did that and hooked it up to a Flickr account, so a custom dialog box appears with a selection of images.

I want the user to be able to then click any image and have the URL of that image added to the original input, from where the custom TinyMCE button was clicked.

This is the TinyMCE custom button code I have:

setup : function(ed) {
    // Add a custom button
    ed.addButton('flickr', {
        title : 'Add Flickr Image',
        image : 'styles/media_icons/flickr.png',
        onclick : function() {
            // Add your own code to execute something on click

            $("div.mediaLibraryPopup .box").load("scripts/loadMediaLibrary.php");
            $("div.mediaLibraryPopup").fadeIn("slow").addClass(container);

        }
    });
}

Then, when you click on an image, I have this jQuery to handle that event:

$("div.mediaLibraryPopup img").live("click", function() {
    var url = $(this).attr("src");
    $("div.mediaLibraryPopup").fadeOut("slow");
});

I've been reading the TinyMCE documentation and working with it for hours, and I can't figure out how to pass that URL variable back to the TinyMCE "ed" event so that it can add it to the input.

Since I'll be using this on multiple inputs, I can't just hard-c开发者_运维知识库ode the input class, either. Any thoughts?

I think you need to insert The URL on the Current Cursor Location in the Editor. if that is the case then you can use this command to insert the content:

tinyMCE.execCommand('mceInsertContent',false,'Your Content Goes Here...');

Hope this helps :)