web-dev-qa-db-fra.com

Étendre le plug-in d'éditeur de média 3.5 pour changer le nom du bouton

J'ai suivi un didacticiel sur la manière de télécharger des images à l'aide de l'outil de téléchargement de média 3.5 de Wordpress. Tout est bien. Je voudrais juste changer le texte du bouton de téléchargement actuel "Insérer dans le message" en quelque chose comme ".. Insérer une image".

J'essaie également de faire cela en tant qu'option de plug-in afin que cela puisse être dynamique.

Toute aide pour que cela fonctionne? Je suis d'accord avec jQuery, mais rien n'a encore avancé.

$.fn.wptuts = function(options) {
   var selector = $(this).selector; // Get the selector
   // Set default options
   var defaults = {
      'preview' : '.preview-upload',
      'text'    : '.text-upload',
      'button'  : '.button-upload',
      'upload'  : 'Upload Image'
   };
   var options = $.extend(defaults, options);

   var _custom_media = true;
   var _orig_send_attachment = wp.media.editor.send.attachment;

   // When the Button is clicked...
   $(options.button).click(function() {
      // Get the Text element.
      var button = $(this);
      var text = $(this).siblings(options.text);
      var send_attachment_bkp = wp.media.editor.send.attachment;

      _custom_media = true;

      wp.media.editor.send.attachment = function(props, attachment) {
         if(_custom_media) {
            // Get the URL of the new image
            text.val(attachment.url).trigger('change');
         } else {
            return _orig_send_attachment.apply(this, [props, attachment]);
         };
      }

      // Change Button Text
      wp.media.frames.file_frame = wp.media({
          title: defaults.upload,
          button: {
              text: defaults.upload
          },
          multiple: false
      });

      wp.media.editor.open(button);

      return false;
   });

   $('.add_media').on('click', function() {
     _custom_media = false;
   });

   $(options.text).bind('change', function() {
      // Get the value of current object
      var url = this.value;
      // Determine the Preview field
      var preview = $(this).siblings(options.preview);
      // Bind the value to Preview field
      $(preview).attr('src', url);
   });
}

// Usage
$('.upload').wptuts(); // Use as default option.
jqueryuploadsmedia
3
souporserious

Je l'ai compris en utilisant une méthode différente. Aide de ici .

$.fn.oeUpload = function(options) {
    // Set default options
    var defaults = {
      'preview' : '.preview-upload',
      'text'    : '.text-upload',
      'button'  : '.button-upload',
      'name'    : 'Choose Image'
    };
    var options = $.extend(defaults, options);
    var uploader;

    $(options.button).click(function(e) {

        e.preventDefault();

        //If the uploader object has already been created, reopen the dialog
        if (uploader) {
            uploader.open();
            return;
        }

        //Extend the wp.media object
        uploader = wp.media.frames.file_frame = wp.media({
            title: options.name,
            button: {
                text: options.name
            },
            multiple: false
        });

        //When a file is selected, grab the URL and set it as the text field's value
        uploader.on('select', function() {
            attachment = uploader.state().get('selection').first().toJSON();
            $(options.text).val(attachment.url);
            $(options.preview).attr('src', attachment.url);
        });

        //Open the uploader dialog
        uploader.open();

    });
}

$('.upload').oeUpload({name: "Choose This Image"});
3
souporserious