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

Question

TinyMCE Editor allows you to assign a custom button on the editor toolbar. I did this and connected it to my Flickr account, so a special dialog box appears with a choice of images.

I want the user to then click on any image and add the URL of this image to the original input, from where the TinyMCE custom button is clicked.

This is the TinyMCE custom button code that 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 the image, I have this jQuery to handle this event:

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

I read the TinyMCE documentation and worked with it for several hours, and I cannot figure out how to pass this URL variable back to the TinyMCE "ed" event so that it can add it to the input.

Since I will use this on multiple inputs, I cannot just hardcode the input class. Any thoughts?

Answer 1

I think you need to paste the URL into the current cursor location in the editor. if so, then you can use this command to insert content:

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

Hope this helps :)