Comment ajouter un bouton de shortcode à l'éditeur TinyMCE?

34

Comment créer une icône de plugin dans WordPress Post? Le code que je veux insérer dans le code du plugin et qui apparaîtra dans la barre de messages [wp-admin / post.php].

comme cette image:

Résultat:sijecliquesurl'icône,lecontenudumessageestautomatiquementécritpar[plugin]:

    
posée Juan Lie 13.11.2012 - 04:21

2 réponses

63

Pour ajouter notre bouton à l'éditeur TinyMCE, nous devons faire plusieurs choses:

  1. Ajoutez notre bouton à la barre d'outils
  2. Enregistrer un plugin TinyMCE
  3. Créez ce plug-in TinyMCE qui indique à TinyMCE quoi faire lorsque vous cliquez sur notre bouton.

Étapes 1 et 2

Lors de ces étapes, nous enregistrons notre plug-in TinyMCE, qui vivra dans un fichier javascript à 'path/to/shortcode.js' (voir wpse72394_register_tinymce_plugin() ci-dessous)

 // init process for registering our button
 add_action('init', 'wpse72394_shortcode_button_init');
 function wpse72394_shortcode_button_init() {

      //Abort early if the user will never see TinyMCE
      if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') && get_user_option('rich_editing') == 'true')
           return;

      //Add a callback to regiser our tinymce plugin   
      add_filter("mce_external_plugins", "wpse72394_register_tinymce_plugin"); 

      // Add a callback to add our button to the TinyMCE toolbar
      add_filter('mce_buttons', 'wpse72394_add_tinymce_button');
}


//This callback registers our plug-in
function wpse72394_register_tinymce_plugin($plugin_array) {
    $plugin_array['wpse72394_button'] = 'path/to/shortcode.js';
    return $plugin_array;
}

//This callback adds our button to the toolbar
function wpse72394_add_tinymce_button($buttons) {
            //Add the button ID to the $button array
    $buttons[] = "wpse72394_button";
    return $buttons;
}

Étape n ° 3

Nous devons maintenant créer notre plug-in TinyMCE. Cela ira dans un fichier 'path/to/shortcode.js' (comme spécifié dans les premières étapes).

jQuery(document).ready(function($) {

    tinymce.create('tinymce.plugins.wpse72394_plugin', {
        init : function(ed, url) {
                // Register command for when button is clicked
                ed.addCommand('wpse72394_insert_shortcode', function() {
                    selected = tinyMCE.activeEditor.selection.getContent();

                    if( selected ){
                        //If text is selected when button is clicked
                        //Wrap shortcode around it.
                        content =  '[shortcode]'+selected+'[/shortcode]';
                    }else{
                        content =  '[shortcode]';
                    }

                    tinymce.execCommand('mceInsertContent', false, content);
                });

            // Register buttons - trigger above command when clicked
            ed.addButton('wpse72394_button', {title : 'Insert shortcode', cmd : 'wpse72394_insert_shortcode', image: url + '/path/to/image.png' });
        },   
    });

    // Register our TinyMCE plugin
    // first parameter is the button ID1
    // second parameter must match the first parameter of the tinymce.create() function above
    tinymce.PluginManager.add('wpse72394_button', tinymce.plugins.wpse72394_plugin);
});
    
réponse donnée Stephen Harris 13.11.2012 - 18:24
5

Il y a trop de choses à mettre ici pour la réponse complète, alors consultez ce guide: enlace

Vous devez créer un fichier Javascript qui agit à partir du bouton que vous vous êtes inscrit via WordPress et qui insère le bouton TinyMCE dans l'éditeur.

    
réponse donnée developdaly 13.11.2012 - 05:44

Lire d'autres questions sur les étiquettes