Использование медиазагрузчика Wordpress 3.5 в метабоксе

Вот небольшой руководство по использованию медиазагрузчика 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();

Я делаю почти то же самое, это еще не готово, но уже работает:

В 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' ); // второй аргумент такой же, как id `<input>`

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);
    // устанавливаем URL как значение
    jQuery('#default_featured_image').val(imgurl);
    tb_remove();
};

Это позволит вам загружать и передавать URL изображения (любого размера) в элемент <input>.
Я пытаюсь сделать это как настройку, и это работает. Единственное, что мне сейчас нужно — это надежный способ передать ID вложения в <input>.

Я думаю, что @janw полностью прав в этом вопросе, но мне не удалось заставить одну вещь работать. Ян добавляет кнопку медиатеки с помощью:

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="Изображение из медиатеки" class="button-secondary" />

Затем я подключил свой пользовательский jQuery-файл и файл стилей thickbox, также в файле 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;
    });

    // пользователь вставляет файл в пост.
    // пользовательский код выполняется только если процесс был начат с помощью вышеуказанного кода
    // window.send_to_editor(html) — это стандартный способ обработки полученных данных в WordPress

    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. Таким образом, этот код можно использовать многократно на одной странице. Вам просто нужно присвоить класс всем кнопкам или использовать индивидуальные id для кнопок в вашем jQuery, как это сделал я. Надеюсь, это поможет кому-то так же, как ответ Яна помог мне.

Я знаю, что это старый пост, но просто хочу поделиться своими находками:

Чтобы открыть редактор медиафайлов, мы вызываем эту функцию:

wp.media.editor.open();

Редактор медиафайлов по сути проверяет наличие редактора tinyMCE (window.tinymce), затем Quicktags (window.QTags), чтобы передать им контент.

В моём подходе для получения контента я присвоил window.QTags пользовательский объект, который имеет метод insertContent():

var newObject = {
  insertContent: function(html){
    // извлекаем источник изображения
    $(html).find('img').attr('src');
  }
}

// присваиваем newObject в свойство window.QTags
window.QTags = newObject;

Ссылка: phpxref