ใช้ Wordpress 3.5 Media Uploader ใน meta box หรือไม่

เป็นไปได้ที่จะทำ?

ฉันชอบที่เครื่องมืออัพโหลดใหม่ทำงานอย่างไร ฉันเดาว่ามันเกี่ยวข้องกับการเรียก jQuery เหมือนอย่างอื่น

แก้ไข

นี่คือรหัสที่ฉันกำลังใช้อยู่

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

คำตอบนี้ยังไม่สมบูรณ์ คุณต้องกำหนดและติดตามช่องป้อนข้อมูลของคุณด้วยตัวเอง ฯลฯ สิ่งนี้จะช่วยให้คุณเริ่มต้นได้ หากคุณมีคำถามที่เป็นรูปธรรมมากขึ้นเพียงแค่ถาม

และให้แน่ใจว่าได้มอบหมายหน้าที่เดิมเมื่อสคริปต์ของคุณเสร็จสิ้น

_{ดึงออกมาจากความคิดเห็น:}

ฉันจะฟังเหตุการณ์ปิดของ Lightbox ได้อย่างไร

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

จาวาสคริปต์:

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>องค์ประกอบ
ฉันกำลังพยายามทำสิ่งนี้เป็นการตั้งค่าและใช้งานได้เฉพาะตอนนี้ที่ฉันต้องการเท่านั้นเป็นวิธีที่เชื่อถือได้ในการส่ง 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="Media Library Image" class="button-secondary" />

จากนั้นฉันก็ลงทะเบียนไฟล์ jquery ที่กำหนดเองและไฟล์ thickbox css ของฉันในไฟล์ 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;
    });

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