2010-11-28 14 views
2

J'ai besoin de retourner les valeurs que j'ai sélectionnées dans une boîte de dialogue jQuery UI.Comment renvoyer des valeurs dans la boîte de dialogue jQuery UI?

Actuellement, je suis juste la mise en valeur comme ceci:

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"); 
}); 

Le problème que je fais maintenant face cependant, est que j'ouvre la boîte de dialogue throug un bouton personnalisé dans TinyMCE. J'avais donc besoin d'une autre façon d'insérer l'image. Voici ce que j'ai trouvé:

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

La fonction reçoit la variable 'ed' transmise par le plugin tinyMCE. Voici le script pour que:

(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); 
})(); 

Maintenant, lorsque vous cliquez sur le bouton d'insertion, je peux exécuter le code suivant pour insérer des données dans l'éditeur de texte:

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
Remerciez de la TJ Crowder, j'ai trouvé la réponse. Le code est mis à jour pour refléter cela.

Répondre

2

Vous ne pouvez pas faire:

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

... parce que l'interaction de votre dialogue avec l'utilisateur doit être asynchrone à l'appel openImageManager, il n'y a pas moyen de mettre la openImageManager fonction "en attente" en attendant que les événements de l'interface utilisateur (comme l'utilisateur qui fait quelque chose) se produisent. Ce que vous devez faire est d'afficher la boîte de dialogue, puis d'ailleurs gérer la fermeture et le collage de l'image dans TinyMCE (par exemple, l'envoi d'une commande mceImage via execCommand). Vous ne pouvez pas l'avoir comme valeur de retour de votre fonction openImageManager.

+0

Ah, merci pour votre commentaire. Cela m'a aidé à trouver la solution. Voir mon code mis à jour. – Steven

+0

@Steven: Excellent, heureux que cela a aidé. –