Vous utilisez Wordpress 3.5 Media Uploader dans la méta-boîte?

Est-ce possible?

J'adore le fonctionnement du nouvel uploader. Je suppose que cela a à voir avec un appel jQuery comme l'a fait l'autre façon.

ÉDITER

Ceci est le code que j'utilise actuellement

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

Pour vous aider à démarrer, les fonctions de base et les substitutions pour autant que je sache actuellement.Il pourrait y avoir de meilleures solutions, mais je n'ai eu que deux jours avec 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.
   }

Ce n'est pas une réponse de travail complète. Vous devez définir et garder une trace de vos champs de saisie par vous-même, etc. Cela devrait vous aider à démarrer. Si vous avez des questions plus concrètes, posez-les simplement.

Et assurez-vous de réaffecter les fonctions d'origine lorsque votre script est terminé.

_{Tiré des commentaires:}

Comment puis-je écouter l'événement de fermeture de la lightbox?

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

Voici un petit tutoriel sur la façon d'utiliser le téléchargeur de médias WP 3.5 dans les options de thème. C'est ce que j'ai trouvé et cela fonctionne parfaitement pour moi. Faites-moi savoir si vous trouvez une meilleure solution.

Voici comment j'ai implémenté le code dans mes options de thème:

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;

  });
});

Mise à jour

Ce code ne fonctionne que sur la page de post-édition. Pour le faire fonctionner sur la page d'options de thème, vous devez ajouterwp_enqueue_media();

Je fais presque la même chose ce n'est pas encore prêt mais ça marche:

dans le 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

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

Cela vous permettra de télécharger et d'envoyer l'url de l'image (de toute taille) à l' <input>élément.
J'essaie de le faire comme paramètre et cela fonctionne, seul ce dont j'ai besoin maintenant est un moyen fiable d'envoyer l'ID de pièce jointe au<input>

Je pense que @janw a tout à fait raison, mais je n'ai pas réussi à faire fonctionner une chose. Jan insère le bouton de la bibliothèque multimédia en utilisant:

do_action( 'media_buttons', 'default_featured_image' );

puis préempte l'action par défaut en utilisant:

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

Le problème que j'ai rencontré est que l'insertion d'un bouton multimédia de cette manière n'assigne pas un identifiant "default_featured_image_button" au lien. En fait, il n'ajoute aucun identifiant sur le lien inséré. Voici donc ce que j'ai fait pour le faire fonctionner.

J'ai ajouté cette ligne à ma fonction de rappel de meta box juste après mon champ de saisie:

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

J'ai ensuite mis en file d'attente mon fichier jquery personnalisé et le fichier css thickbox, également dans mon fichier functions.php, en utilisant:

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

Enfin, mon fichier image-set.js comprenait les éléments suivants:

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

Vous remarquerez que j'ai utilisé des variables pour stocker le nom et l'id du champ de saisie juste avant le lien qui appelle le jQuery. De cette façon, ce code peut être utilisé à plusieurs reprises sur la même page. Vous auriez juste besoin d'assigner une classe à tous les boutons ou d'utiliser des identifiants individuels pour les boutons de votre jquery comme je l'ai fait. J'espère que cela aide quelqu'un comme la réponse de Jan m'a aidé.

Je sais que c'est un ancien post, mais je veux juste partager mes conclusions:

Pour ouvrir l'éditeur multimédia, nous appelons cette fonction

wp.media.editor.open();

l'éditeur de médias va essentiellement vérifier pour tinyMCE editor ( window.tinymce), puis Quicktags ( window.QTags), pour transmettre le contenu à.

Pour mon approche pour obtenir le contenu, j'ai assigné window.QTagsavec un objet personnalisé, qui a une insertContent()méthode:

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;

Référence: phpxref