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

34

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

Comme cette image:

entrez la description de l'image ici

Sortie: Si je clique sur l'icône, [plugin]le contenu de la publication est automatiquement écrit comme ceci:

entrez la description de l'image ici

Juan Lie
la source
Ajoutez une capture d'écran du résultat que vous souhaitez obtenir. Ce que vous voulez n'est pas clair.
fuxia
Je pense que vous voulez créer un plugin qui ajoute un bouton TinyMCE à l'éditeur qui insère un shortcode WordPress, n'est-ce pas?
développement

Réponses:

65

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

Dans ces étapes, nous enregistrons notre plug-in TinyMCE, qui vivra dans un fichier javascript à l'adresse '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 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);
});
Stephen Harris
la source
1
À l'étape 1, changer le initcrochet pour le admin_initcrochet pourrait également économiser un léger traitement supplémentaire sur le front-end.
Tim Malone
Cela dépend, vous pouvez aussi avoir TinyMCE sur le front-end. Mais oui, si cela ne concerne que l’administrateur, ce admin_initserait préférable.
Stephen Harris
5

Il y a trop de choses à mettre ici pour la réponse complète, alors consultez ce guide: http://wp.smashingmagazine.com/2012/05/01/wordpress-shortcodes-complete-guide/

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

développer
la source
3
Utilise query_posts alors ce n'est peut-être pas le meilleur exemple de lien.
Brad Dalton