Question

I need to return som values I have selected in a jQuery UI Dialog box.

Currently I’m just setting the value like this:

jQuery('#fileBrowser input.addImage').live("click", function() {
  // 'file' is set when selected in file browser
  imageUrlInputBox.val(file);      // Add relative image url to text field
  jQuery("#fileBrowser").dialog("close");
});

The problem I face now however, is that I open the dialog box throug a custom button in TinyMCE. So I needed another way of inserting the image. This is what I came up with:

// This is the function valled when clicking the tinyMCE button
function openImageManager(ed) {        
  //tinymce is a global variable.      
  tinymce = ed; 
  jQuery("#fileBrowser").dialog("open");
}

The function receives the ‘ed’ variable passed from the tinyMCE plugin. Here is the script for that:

(function() {

    tinymce.create('tinymce.plugins.wp_filebrowser_plugin', {

        init : function(ed, url){
            ed.addButton('wp_filebrowser_plugin', {
                title : 'Insert image',
                onclick : function() {
                  openImageManager(ed) 
                },
                image: url + "/img/wand.png"
            });
        },

        getInfo : function() {
            return {
                longname : 'WP Filebrowser TinyMCE plugin',
            };
        }
    });

    tinymce.PluginManager.add('wp_filebrowser_plugin', tinymce.plugins.wp_filebrowser_plugin);
})();

Now, when clicking the insert button, I can execute the following code to insert data into the text editor:

jQuery('#fileBrowser input.addImage').live("click", function() {
  var img_html = '<img class="' + css_class + '" src="' + file_url + '" title="' + alt + '" alt="" />';
  tinymce.execCommand('mceInsertContent', false, img_html);  
});

SOLUTION
Thank’s to T.J. Crowder, I found the answer. The code is updated to reflect this.

Answer 1

You can’t do this:

function openImageManager() {
  img_html = jQuery("#fileBrowser").dialog("open"); // I need some sort of callback here
  return img_html;
}

…because the interaction of your dialog with the user needs to be asynchronous to the openImageManager call, there’s no way to put the openImageManager function “on hold” while waiting for UI events (like the user doing something) to occur.

What you need to do is show the dialog, and then elsewhere handle closing it and pasting the image into TinyMCE (e.g., sending an mceImage command via execCommand). You can’t have it as the return value of your openImageManager function.