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.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.
精彩评论