Как вернуть значения в диалоге jQuery UI? - PullRequest
2 голосов
/ 28 ноября 2010

Мне нужно вернуть значения сома, которые я выбрал в диалоговом окне jQuery UI.

В настоящее время я просто устанавливаю значение следующим образом:

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

Проблема, с которой я столкнулся сейчасоднако, я открываю диалоговое окно через пользовательскую кнопку в TinyMCE.Поэтому мне нужен был другой способ вставки изображения.Вот что я придумал:

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

Функция получает переменную 'ed', переданную из плагина tinyMCE.Вот сценарий для этого:

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

Теперь, нажав кнопку вставки, я могу выполнить следующий код для вставки данных в текстовый редактор:

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

РЕШЕНИЕ
Спасибо TJ Crowder, я нашел ответ.Код обновлен, чтобы отразить это.

1 Ответ

2 голосов
/ 28 ноября 2010

Вы не можете сделать это:

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

... потому что взаимодействие вашего диалога с пользователем должно быть асинхронным для openImageManager вызов, нет никакого способа поставить openImageManager функцию "на удержание" во время ожидания событий пользовательского интерфейса (например, пользователь делает что-то).

Что вам нужно сделать, это показать диалоговое окно, изатем в другом месте обработайте его закрытие и вставьте изображение в TinyMCE (например, отправив команду mceImage через execCommand).Вы не можете иметь его в качестве возвращаемого значения вашей openImageManager функции.

...