代码之家  ›  专栏  ›  技术社区  ›  Steven

如何在jQuery UI对话框中返回值?

  •  2
  • Steven  · 技术社区  · 14 年前

    我需要返回在jQuery UI对话框中选择的som值。

    目前我只是这样设置值:

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

    函数接收从tinyMCE插件传递的“ed”变量。以下是脚本:

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

    解决方案
    谢谢T.J.克劳德,我找到了答案。更新代码以反映这一点。

    1 回复  |  直到 14 年前
        1
  •  2
  •   T.J. Crowder    14 年前

    不能 执行以下操作:

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

    …因为您与用户的对话交互需要 异步的 openImageManager 打电话,没办法把 openImageManager 在等待UI事件(比如用户正在做的事情)发生时,函数“on hold”。

    您需要做的是显示对话框,然后在其他地方处理关闭对话框并将图像粘贴到TinyMCE中(例如,发送 mceImage 命令通过 execCommand ). 你不能把它作为 openImageManager 功能。