TinyMCE editor lets you assign a custom button to it's 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-code the input class, either. Any thoughts?