在meta box中使用WordPress 3.5 Media Uploader?

时间:2012-12-12 作者:souporserious

这可能吗?

我喜欢新上传器的工作方式。我猜这与jQuery调用有关,就像另一种方式一样。

编辑

这是我当前使用的代码

jQuery(document).ready(function($) {
$(\'.custom_upload_image_button\').click(function() {
    imageField = $(this).prev(\'input\');
    tb_show(\'\', \'media-upload.php?type=image&TB_iframe=true\');
});
window.send_to_editor = function(html) {
    imgurl = $(html).attr(\'href\');
    $(imageField).val(imgurl);
    tb_remove();
};
$(\'.clear_field\').click(function() {
    var defaultImage = jQuery(this).parent().siblings(\'.custom_default_image\').text();
    jQuery(this).parent().siblings(\'.custom_upload_image\').val(\'\');
    return false;
});
});

5 个回复
最合适的回答,由SO网友:ungestaltbar 整理而成

为了让您开始学习,就我目前所知的基本功能和覆盖。可能有更好的解决方案,但我只有两天的时间使用3.5:

// open modal - bind this to your button
    if ( typeof wp !== \'undefined\' && wp.media && wp.media.editor )
        wp.media.editor.open( ##unique_id_here## );

// backup of original send function
   original_send = wp.media.editor.send.attachment;

// new send function
   wp.media.editor.send.attachment = function( a, b) {
       console.log(b); // b has all informations about the attachment
       // or whatever you want to do with the data at this point
       // original function makes an ajax call to retrieve the image html tag and does a little more
    };

// wp.media.send.to.editor will automatically trigger window.send_to_editor for backwards compatibility

// backup original window.send_to_editor
   window.original_send_to_editor = window.send_to_editor; 

// override window.send_to_editor
   window.send_to_editor = function(html) {
       // html argument might not be useful in this case
       // use the data from var b (attachment) here to make your own ajax call or use data from b and send it back to your defined input fields etc.
   }
这不是完整的工作答案。您必须自己定义并跟踪输入字段等。。这应该让你开始。如果你有更具体的问题,就问吧。

并确保在脚本完成后重新分配原始函数。

摘自评论:

如何收听灯箱关闭事件?

// add listener: 
wp.media.view.Modal.prototype.on(\'close\', function(){ console.log(\'triggered close\'); }

SO网友:Ram Ratan Maurya

这是一个小tutorial 关于如何在主题选项中使用WP 3.5媒体上载程序。这就是我想到的,它对我来说非常适合。如果你有更好的解决办法,请告诉我。

下面是我如何在主题选项中实现代码的:

jQuery(document).ready(function($){
  $(\'.stag-metabox-table .button\').click(function(e){
  var send_attachment_bkp = wp.media.editor.send.attachment;
  var button = $(this);
  var id = button.attr(\'id\').replace(\'_button\', \'\');
  wp.media.editor.send.attachment = function(props, attachment){
    $("#"+id).val(attachment.url);
    wp.media.editor.send.attachment = send_attachment_bkp;
  }

  wp.media.editor.open(button);
  return false;

  });
});

Update

此代码仅适用于后期编辑页面。要使其在主题选项页面上工作,您需要添加wp_enqueue_media();

SO网友:janw

我也在做同样的事情,虽然还没有准备好,但效果不错:

在php中:

<input id="default_featured_image" type="text" size="100" name="default_featured_image" value="<?php echo esc_attr( $value ); ?>" />
<?php
do_action( \'media_buttons\', \'default_featured_image\' ); // second argument is the same as the `<input>` id
javascript:

jQuery(\'#default_featured_image_button\').click(function () {
    var formfield = jQuery(\'#default_featured_image\').attr(\'name\');
    tb_show(\'\', \'media-upload.php?type=image&amp;TB_iframe=true\');
    return false;
});

window.send_to_editor = function (html) {
    var imgurl = jQuery(\'img\', html).attr(\'src\');
    console.log(jQuery(\'img\', html));
    console.log(html);
    console.log(imgurl);
    // set the url as the value
    jQuery(\'#default_featured_image\').val(imgurl);
    tb_remove();
};
这将使您能够将图像url(任何大小)上载并发送到<input> 元素
我正在尝试将其作为一种设置,它可以正常工作,我现在唯一需要的是一种可靠的方式将附件ID发送到<input>

SO网友:MatthewLee

我认为@janw完全正确,但有一件事我做不到。Jan使用以下方式插入媒体库按钮:

do_action( \'media_buttons\', \'default_featured_image\' );
然后使用以下命令抢占默认操作:

jQuery(\'#default_featured_image_button\').click(function () {...
我遇到的问题是,以这种方式插入媒体按钮不会将id“default\\u featured\\u image\\u button”分配给链接。事实上,它不会在插入的链接上添加任何id。所以这就是我所做的,让它发挥作用。

我在输入字段之后添加了此行到meta box回调函数:

<input id="upload_logo_button" type="button" value="Media Library Image" class="button-secondary" />
然后,我将我的自定义jquery文件和thickbox css文件(也在我的函数中)放入队列。php文件,使用:

add_action(\'admin_enqueue_scripts\', \'jhsir_load_image_set_js\');

function jhsir_load_image_set_js() {
    wp_enqueue_script( \'jhsir_image_set_script\', get_stylesheet_directory_uri() . \'/js/image-set.js\', array(\'jquery\',\'media-upload\',\'thickbox\') );
    wp_enqueue_style( \'thickbox\' );
}
最后,我的图像集。js文件包括以下内容:

jQuery(document).ready(function($) {

    var formfield = null;

    $(\'#upload_logo_button, #upload_background_button\').click(function() {

        $(\'html\').addClass(\'Image\');

        formfield = $(this).prev(\'input\').attr(\'name\');  
        formfield_id = $(this).prev(\'input\').attr(\'id\'); 

        tb_show( \'\', \'media-upload.php?type=image&TB_iframe=true\' );
        return false;
    });

    // user inserts file into post.
    // only run custom if user started process using the above process
    // window.send_to_editor(html) is how wp normally handles the received data

    window.original_send_to_editor = window.send_to_editor;
    window.send_to_editor = function( html ) {
        var fileurl;

        if(formfield != null) {
            fileurl = $( \'img\', html).attr(\'src\');

            $( "#" + formfield_id ).val(fileurl);

            tb_remove();

            $(\'html\').removeClass(\'Image\');
            formfield = null;
        } else {
            window.original_send_to_editor(html);
        }
    };
});
您会注意到,我使用变量来存储输入字段的名称和id,该字段位于调用jQuery的链接之前。这样,可以在同一页上重复使用此代码。您只需要为所有按钮分配一个类,或者像我一样为jquery中的按钮使用单独的id。我希望这能像简的回答一样帮助别人。

SO网友:sanusi

我知道这是一篇老帖子,但我只想分享我的发现:

要打开媒体编辑器,我们调用此函数

wp.media.editor.open();
媒体编辑器基本上会检查tinyMCE编辑器(window.tinymce), 然后快速标记(window.QTags), 将内容传递给。

对于获取内容的方法,我指定window.QTags 使用自定义对象,该对象具有insertContent() 方法:

var newObject = {
  insertContent: function(html){
    // to extract the image source
    $(html).find(\'img\').attr(\'src\');
  }
}

// assign the newObject to window.QTags property
window.QTags = newObject;
参考号:phpxref

结束