Come aggiungere un pulsante shortcode all'editor TinyMCE?

Per aggiungere il nostro pulsante all'editor TinyMCE dobbiamo fare diverse operazioni:

1. Aggiungere il nostro pulsante alla barra degli strumenti
2. Registrare un plugin TinyMCE
3. Creare quel plugin TinyMCE che dice a TinyMCE cosa fare quando il nostro pulsante viene cliccato.

Passaggi #1 e #2

In questi passaggi registriamo il nostro plugin TinyMCE che risiederà all'interno di un file javascript in 'path/to/shortcode.js' (vedi wpse72394_register_tinymce_plugin() qui sotto)

 // processo di inizializzazione per registrare il nostro pulsante
 add_action('init', 'wpse72394_shortcode_button_init');
 function wpse72394_shortcode_button_init() {

      //Interrompi subito se l'utente non vedrà mai TinyMCE
      if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') && get_user_option('rich_editing') == 'true')
           return;

      //Aggiungi un callback per registrare il nostro plugin tinymce   
      add_filter("mce_external_plugins", "wpse72394_register_tinymce_plugin"); 

      // Aggiungi un callback per aggiungere il nostro pulsante alla barra degli strumenti TinyMCE
      add_filter('mce_buttons', 'wpse72394_add_tinymce_button');
}


//Questo callback registra il nostro plugin
function wpse72394_register_tinymce_plugin($plugin_array) {
    $plugin_array['wpse72394_button'] = 'path/to/shortcode.js';
    return $plugin_array;
}

//Questo callback aggiunge il nostro pulsante alla barra degli strumenti
function wpse72394_add_tinymce_button($buttons) {
            //Aggiungi l'ID del pulsante all'array $button
    $buttons[] = "wpse72394_button";
    return $buttons;
}

Passaggio #3

Ora dobbiamo creare il nostro plugin TinyMCE. Questo andrà in un file 'path/to/shortcode.js' (come specificato nei passaggi precedenti).

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

    tinymce.create('tinymce.plugins.wpse72394_plugin', {
        init : function(ed, url) {
                // Registra il comando per quando il pulsante viene cliccato
                ed.addCommand('wpse72394_insert_shortcode', function() {
                    selected = tinyMCE.activeEditor.selection.getContent();

                    if( selected ){
                        //Se del testo è selezionato quando il pulsante viene cliccato
                        //Avvolgilo con lo shortcode
                        content =  '[shortcode]'+selected+'[/shortcode]';
                    }else{
                        content =  '[shortcode]';
                    }

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

            // Registra i pulsanti - attiva il comando sopra quando cliccato
            ed.addButton('wpse72394_button', {title : 'Inserisci shortcode', cmd : 'wpse72394_insert_shortcode', image: url + '/path/to/image.png' });
        },   
    });

    // Registra il nostro plugin TinyMCE
    // il primo parametro è l'ID del pulsante
    // il secondo parametro deve corrispondere al primo parametro della funzione tinymce.create() sopra
    tinymce.PluginManager.add('wpse72394_button', tinymce.plugins.wpse72394_plugin);
});