Wordpress 3.5 Media Uploader'ı meta kutusunda mı kullanıyorsunuz?

Bunu yapmak mümkün mü?

Yeni yükleyicinin nasıl çalıştığını seviyorum. Diğer şekilde olduğu gibi bir jQuery çağrısı ile ilgili olduğunu tahmin ediyorum.

DÜZENLE

Bu şu anda kullandığım kod

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

Başlamak için, şu anda bildiğim kadarıyla temel işlevler ve geçersiz kılmalar. Daha iyi çözümler olabilir, ancak 3.5 ile henüz iki günüm vardı:

// 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.
   }

Bu tam bir çalışma cevabı değil. Girdi alanlarınızı kendiniz tanımlamanız ve takip etmeniz gerekir. Daha somut sorularınız varsa, sorun.

Komut dosyanız tamamlandığında orijinal işlevleri yeniden atadığınızdan emin olun.

_{Yorumlardan alınmıştır:}

Işık kutusunun yakın etkinliğini nasıl dinleyebilirim?

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

Tema seçeneklerinde WP 3.5 medya yükleyicinin nasıl kullanılacağı hakkında küçük bir öğretici . Ben de öyle geldim ve benim için mükemmel bir şekilde çalışıyor. Daha iyi bir çözüm bulursanız bana bildirin.

İşte benim tema seçenekleri kodu nasıl uyguladık:

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;

  });
});

Güncelleme

Bu kod yalnızca yayın düzenleme sayfasında çalışır. Tema seçenekleri sayfasında çalışmasını sağlamak için eklemeniz gerekirwp_enqueue_media();

Neredeyse aynı yapıyorum henüz hazır değil ama işe yarıyor:

php içinde:

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

Bu, resim URL'sini (herhangi bir boyutta) <input>öğeye yüklemenizi ve göndermenizi sağlar .
Bunu bir ayar olarak yapmaya çalışıyorum ve çalışıyor, Sadece şimdi ihtiyacım thig ek kimliği göndermek için güvenilir bir yoludur<input>

Sanırım @janw bunu tamamen doğru yaptı, ama bir şeyi çalıştıramadım. Jan aşağıdakileri kullanarak medya kitaplığı düğmesini ekler:

do_action( 'media_buttons', 'default_featured_image' );

ve ardından aşağıdakileri kullanarak varsayılan eylemi önceden boşaltır:

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

Karşılaştığım sorun, bu şekilde bir medya düğmesi eklemenin, bağlantıya "default_featured_image_button" kimliği atamamasıdır. Aslında, eklenen bağlantıya herhangi bir kimlik eklemez. Bu yüzden onu işe almak için yaptım.

Bu satırı, giriş alanımdan hemen sonra meta kutusu geri arama işlevime ekledim:

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

Daha sonra kullanarak benim işlev.php dosyasında, özel jquery dosyamı ve thickbox css dosyasını enqueued:

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

Son olarak image-set.js dosyam şunları içeriyordu:

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

Değişkenleri kullandığımı, jQuery'yi çağıran bağlantıdan hemen önceki girdi alanının adını ve kimliğini saklamak için kullandığımı göreceksiniz. Bu şekilde bu kod aynı sayfada tekrar tekrar kullanılabilir. Tüm düğmelere bir sınıf atamanız veya jquery'nizdeki düğmeler için tek tek kimlikleri kullanmanız yeterlidir. Umarım Jan'ın cevabı bana yaptığı gibi birisine yardım eder.

Bunun eski bir gönderi olduğunu biliyorum, ancak bulgularımı paylaşmak istiyorum:

Medya düzenleyiciyi açmak için bu işlevi

wp.media.editor.open();

medya düzenleyici temel olarak içeriği aktarmak için window.tinymcetinyMCE düzenleyicisi ( ), ardından Quicktags ( window.QTags) öğesini kontrol eder.

İçeriği alma yaklaşımım için window.QTags, bir insertContent()yöntemi olan özel bir nesne ile atandım :

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;

Referans: phpxref