Використання Wordpress 3.5 Media Uploader у метабоці?

Чи можливо це зробити?

Мені подобається, як працює новий завантажувач. Я здогадуюсь, що це стосується дзвінка jQuery, як і в інший спосіб.

EDIT

Це код, яким я зараз користуюся

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

Щоб розпочати, основні функції та зміни, наскільки я зараз знаю. Можливо, будуть кращі рішення, але у мене було лише два дні з 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'); }

Ось невеличкий підручник про те, як використовувати 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' ); // 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();
};

Це дасть змогу завантажувати та надсилати URL-адресу зображення (будь-якого розміру) до <input>елемента.
Я намагаюся зробити це як налаштування, і це працює. Тільки що мені потрібно зараз - це надійний спосіб надіслати ідентифікатор вкладеного файлу до<input>

Я думаю, що @janw цілком зрозумів це, але мені не вдалося змусити одну справу. Ян вставляє кнопку медіатеки за допомогою:

do_action( 'media_buttons', 'default_featured_image' );

а потім попередньо виконує дію за замовчуванням, використовуючи:

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

Проблема, з якою я зіткнувся, полягає в тому, що вставляючи медіа-кнопку таким чином, не присвоюйте ідентифікатору "default_featured_image_button" посилання. Насправді він не додає жодного ідентифікатора у вставлене посилання. Отже, це я зробив, щоб змусити його працювати.

Я додав цей рядок до функції зворотного дзвінка метабоксу відразу після мого поля введення:

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

Потім я запустив свій власний файл jquery та файл css thickbox, також у своєму файлі function.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);
        }
    };
});

Ви зауважите, що я використовував змінні для зберігання імені та ідентифікатора поля введення, що знаходиться безпосередньо перед посиланням, яке викликає jQuery. Таким чином цей код можна використовувати неодноразово на одній сторінці. Вам просто потрібно призначити класу всім кнопкам або використовувати окремі ідентифікатори для кнопок у вашому jquery, як і я. Я сподіваюся, що це допомагає комусь, як відповіла мені відповідь Яна.

Я знаю, що це стара публікація, але я просто хочу поділитися своїми висновками:

Щоб відкрити медіаредактор, ми викликаємо цю функцію

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