在meta框中使用Wordpress 3.5 Media Uploader?


16

这可能吗?

我喜欢新上传器的工作方式。我猜想它和其他方法一样与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;
});
});

Answers:


9

就目前为止我所知的基本功能和覆盖可能会有更好的解决方案,但是对于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'); }

谢谢!我似乎无法使它正常工作。如果有帮助,我粘贴了上面用于旧媒体上传器的内容。
sotororserious

Ipstenu和支持团队汇总了一份针对WordPress 3.5报告的问题的总列表(wordpress.org/support/topic/…)。该线程并不意味着具有任何用户反馈,而是一个精选线程,可以快速突出显示正在报告的已知问题以及有关如何解决该问题的说明。
塔拉

如何收听灯箱的关闭事件?如果有人不选择新图像,我需要触发一个自定义功能
Xaver 2012年

3
//添加侦听器:wp.media.view.Modal.prototype.on('close',function(){console.log('triggered close');}
ungestaltbar 2012年

6

这是一个有关如何在主题选项中使用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;

  });
});

更新资料

此代码仅在帖子编辑页面上有效。要使其在主题选项页面上起作用,您需要添加wp_enqueue_media();


如果仅提供单个图像选择而不提供多个图像怎么办?
Mehul Kaklotar'3

3

我正在做的事情几乎还没准备好,但是可以正常工作:

在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>


谢谢你sooooooooooooooooooooo很多!!!!经过2天的拼命寻找解决方案,终于成功了!!!万分感谢!!!
Devner

您可能想在我的插件中查看其源代码:wordpress.org/extend/plugins/default-featured-image
janw 2013年

3

我认为@janw完全正确了这一点,但是我无法使一件事起作用。Jan使用以下命令插入媒体库按钮:

do_action( 'media_buttons', 'default_featured_image' );

然后使用以下方法抢占默认操作:

jQuery('#default_featured_image_button').click(function () {...

我遇到的问题是,以这种方式插入媒体按钮并没有为链接分配ID“ default_featured_image_button”。实际上,它不会在插入的链接上添加任何ID。因此,这就是我为使其正常工作所做的。

我在输入字段之后将以下行添加到元框回调函数中:

<input id="upload_logo_button" type="button" value="Media Library Image" class="button-secondary" />

然后,我使用以下命令将我的自定义jquery文件和thickbox css文件放入我的functions.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' );
}

最后,我的image-set.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。我希望这对某人有帮助,因为Jan的回答对我有所帮助。


0

我知道这是一篇旧文章,但是我只想分享我的发现:

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

wp.media.editor.open();

媒体编辑器基本上会先检查tinyMCE编辑器(window.tinymce),然后再检查Quicktags(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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.