Verwenden Sie Wordpress 3.5 Media Uploader in der Meta-Box?

Ist das möglich zu tun?

Ich finde es toll, wie der neue Uploader funktioniert. Ich vermute, es hat mit einem jQuery-Aufruf zu tun, wie es der andere Weg tat.

BEARBEITEN

Dies ist der Code, den ich derzeit verwende

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

Um Ihnen den Einstieg zu erleichtern, sind die Grundfunktionen und Außerkraftsetzungen meines Wissens aktuell. Es gibt vielleicht bessere Lösungen, aber ich hatte nur zwei Tage mit 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.
   }

Dies ist keine vollständige funktionierende Antwort. Sie müssen Ihre Eingabefelder selbst definieren und nachverfolgen. Dies sollte Ihnen nur den Einstieg erleichtern. Wenn Sie konkretere Fragen haben, fragen Sie einfach.

Und stellen Sie sicher, dass Sie die ursprünglichen Funktionen neu zuweisen, wenn Ihr Skript fertig ist.

_{Aus Kommentaren gezogen:}

Wie kann ich das Abschlussereignis des Leuchtkastens anhören?

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

Hier finden Sie ein kleines Tutorial zur Verwendung von WP 3.5 Media Uploader in Designoptionen. Das habe ich mir ausgedacht und es funktioniert perfekt für mich. Lassen Sie mich wissen, ob Sie eine bessere Lösung finden.

So habe ich den Code in meine Designoptionen implementiert:

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;

  });
});

Aktualisieren

Dieser Code funktioniert nur auf der Nachbearbeitungsseite. Damit es auf der Seite mit den Themenoptionen funktioniert, müssen Sie sie hinzufügenwp_enqueue_media();

Ich mache fast das gleiche, es ist noch nicht fertig, aber es funktioniert:

in der 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

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

Auf diese Weise können Sie die Bild-URL (beliebiger Größe) hochladen und an das <input>Element senden .
Ich versuche dies als Einstellung zu tun und es funktioniert. Nur das, was ich jetzt brauche, ist eine zuverlässige Möglichkeit, die Anhang-ID an die zu senden<input>

Ich denke, @janw hat diesen Punkt völlig richtig verstanden, aber ich konnte nichts bewirken. Jan fügt die Schaltfläche für die Medienbibliothek ein:

do_action( 'media_buttons', 'default_featured_image' );

und bereitet dann die Standardaktion vor mit:

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

Das Problem, auf das ich gestoßen bin, ist, dass das Einfügen einer Medienschaltfläche auf diese Weise dem Link nicht die ID "default_featured_image_button" zuweist. Tatsächlich wird dem eingefügten Link keine ID hinzugefügt. Das habe ich also getan, um es zum Laufen zu bringen.

Ich habe diese Zeile direkt nach meinem Eingabefeld zu meiner Meta-Box-Rückruffunktion hinzugefügt:

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

Ich habe dann meine benutzerdefinierte JQuery-Datei und die Thickbox-CSS-Datei in die Warteschlange gestellt, ebenfalls in meiner Datei 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' );
}

Schließlich enthielt meine Datei image-set.js Folgendes:

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

Sie werden feststellen, dass ich Variablen verwendet habe, um den Namen und die ID des Eingabefelds zu speichern, das sich direkt vor dem Link befindet, der die jQuery aufruft. Auf diese Weise kann dieser Code wiederholt auf derselben Seite verwendet werden. Sie müssten lediglich allen Schaltflächen eine Klasse zuweisen oder einzelne IDs für die Schaltflächen in Ihrer Abfrage verwenden, wie ich es getan habe. Ich hoffe, das hilft jemandem, wie es Jan mir geantwortet hat.

Ich weiß, dass dies ein alter Beitrag ist, aber ich möchte nur meine Erkenntnisse teilen:

Um den Medieneditor zu öffnen, rufen wir diese Funktion auf

wp.media.editor.open();

Der Medieneditor sucht grundsätzlich nach tinyMCE editor ( window.tinymce) und dann nach Quicktags ( window.QTags), an die der Inhalt weitergeleitet werden soll.

Für meinen Ansatz zum Abrufen des Inhalts habe ich window.QTagsein benutzerdefiniertes Objekt zugewiesen , das über eine insertContent()Methode verfügt:

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;

Referenz: phpxref