Menggunakan Wordpress 3.5 Media Uploader di kotak meta?

Apakah ini mungkin dilakukan?

Saya suka cara kerja pengunggah baru. Saya kira itu ada hubungannya dengan panggilan jQuery seperti cara lain lakukan.

EDIT

Ini adalah kode yang saya gunakan saat ini

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

Untuk membantu Anda memulai, fungsi dasar dan menimpa sejauh yang saya tahu saat ini. Mungkin ada solusi yang lebih baik, tapi saya hanya punya dua hari dengan 3,5 belum:

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

Ini bukan jawaban kerja yang lengkap. Anda harus mendefinisikan dan melacak bidang input Anda sendiri dll. Ini hanya akan membantu Anda memulai. Jika Anda memiliki pertanyaan yang lebih konkret, tanyakan saja.

Dan pastikan untuk menetapkan kembali fungsi asli ketika skrip Anda selesai.

_{Ditarik dari komentar:}

Bagaimana saya bisa mendengarkan acara tutup lightbox?

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

Berikut ini adalah tutorial kecil tentang cara menggunakan pengunggah media WP 3.5 dalam opsi tema. Itulah yang saya buat dan itu bekerja sempurna untuk saya. Beri tahu saya jika Anda menemukan solusi yang lebih baik.

Inilah cara saya menerapkan kode dalam opsi tema saya:

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;

  });
});

Memperbarui

Kode ini hanya berfungsi pada halaman edit posting. Untuk membuatnya berfungsi pada halaman opsi tema yang perlu Anda tambahkanwp_enqueue_media();

Saya melakukan hampir sama itu belum siap tetapi berfungsi:

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

Ini memungkinkan Anda untuk mengunggah dan mengirim url gambar (dengan ukuran berapa pun) ke <input>elemen.
Saya mencoba melakukan ini sebagai pengaturan dan berfungsi, Hanya mereka yang saya butuhkan sekarang adalah cara yang dapat diandalkan untuk mengirim lampiran ID ke<input>

Saya pikir @janw sudah benar, tapi saya tidak bisa membuat satu hal berfungsi. Jan menyisipkan tombol perpustakaan media menggunakan:

do_action( 'media_buttons', 'default_featured_image' );

dan kemudian mencegah tindakan default menggunakan:

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

Masalah yang saya temui adalah memasukkan tombol media dengan cara ini tidak memberikan id "default_featured_image_button" ke tautan. Bahkan tidak menambahkan id pada tautan yang dimasukkan. Jadi ini yang saya lakukan untuk membuatnya bekerja.

Saya menambahkan baris ini ke fungsi panggilan balik kotak meta saya tepat setelah bidang input saya:

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

Saya kemudian enqueued file jquery kustom saya dan file css thickbox, juga di file functions.php saya, menggunakan:

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

Akhirnya file image-set.js saya termasuk yang berikut:

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

Anda akan mencatat bahwa saya menggunakan variabel untuk menyimpan nama dan id bidang input yang tepat sebelum tautan yang memanggil jQuery. Dengan cara ini kode ini dapat digunakan berulang kali pada halaman yang sama. Anda hanya perlu menetapkan kelas untuk semua tombol atau menggunakan id individu untuk tombol di jquery Anda seperti yang saya lakukan. Saya harap ini membantu seseorang karena jawaban Jan membantu saya.

Saya tahu bahwa ini adalah pos lama, tetapi saya hanya ingin membagikan temuan saya:

Untuk membuka editor media, kami memanggil fungsi ini

wp.media.editor.open();

editor media pada dasarnya akan memeriksa editor tinyMCE ( window.tinymce), lalu Quicktags (window.QTags ), untuk meneruskan konten.

Untuk pendekatan saya untuk mendapatkan konten, saya ditugaskan window.QTagsdengan objek kustom, yang memiliki insertContent()metode:

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;

Referensi: phpxref