¿Cómo usar el gestor de medios de WordPress 3.5 en un meta box?

Aquí tienes un pequeño tutorial sobre cómo usar el gestor de medios de WP 3.5 en las opciones del tema. Esto es lo que he implementado y me funciona perfectamente. Háznos saber si encuentras alguna solución mejor.

Así es como he implementado el código en las opciones de mi tema:

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;

  });
});

Actualización

Este código solo funciona en la página de edición de entradas. Para que funcione en la página de opciones del tema necesitas añadir wp_enqueue_media();

Estoy haciendo casi lo mismo, todavía no está listo pero funciona:

En el 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' ); // el segundo argumento es el mismo que el id del `<input>`

El 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);
    // establecer la URL como el valor
    jQuery('#default_featured_image').val(imgurl);
    tb_remove();
};

Esto te permitirá subir y enviar la URL de la imagen (de cualquier tamaño) al elemento <input>.
Estoy intentando hacer esto como una configuración y funciona. Lo único que necesito ahora es una forma confiable de enviar el ID del adjunto al <input>.

Creo que @janw tiene esto completamente correcto, pero no pude hacer que una cosa funcionara. Jan inserta el botón de la biblioteca multimedia usando:

do_action( 'media_buttons', 'default_featured_image' );

y luego previene la acción predeterminada usando:

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

El problema con el que me encontré es que insertar un botón de medios de esta manera no asigna un id de "default_featured_image_button" al enlace. De hecho, no agrega ningún id al enlace insertado. Así que esto es lo que hice para que funcione.

Agregué esta línea a mi función de callback del metabox justo después de mi campo de entrada:

<input id="upload_logo_button" type="button" value="Imagen de la Biblioteca Multimedia" class="button-secondary" />

Luego encolé mi archivo jQuery personalizado y el archivo CSS de thickbox, también en mi archivo functions.php, usando:

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

Finalmente, mi archivo image-set.js incluía lo siguiente:

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

    // usuario inserta archivo en la entrada.
    // solo ejecuta personalizado si el usuario inició el proceso usando el proceso anterior
    // window.send_to_editor(html) es cómo wp maneja normalmente los datos recibidos

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

Notarás que usé variables para almacenar el nombre y el id del campo de entrada que está justo antes del enlace que llama al jQuery. De esa manera, este código se puede usar repetidamente en la misma página. Solo necesitarías asignar una clase a todos los botones o usar id's individuales para los botones en tu jQuery como lo hice yo. Espero que esto ayude a alguien como la respuesta de Jan me ayudó a mí.

Sé que esta es una publicación antigua, pero solo quiero compartir mis hallazgos:

Para abrir el editor de medios, llamamos a esta función

wp.media.editor.open();

el editor de medios básicamente verificará el editor tinyMCE (window.tinymce), luego Quicktags (window.QTags), para pasarle el contenido.

Para mi enfoque para obtener el contenido, asigné window.QTags con un objeto personalizado, que tiene un método insertContent():

var newObject = {
  insertContent: function(html){
    // para extraer la fuente de la imagen
    $(html).find('img').attr('src');
  }
}

// asignar el newObject a la propiedad window.QTags
window.QTags = newObject;

Referencia: phpxref