web-dev-qa-db-fra.com

Comment ajouter plusieurs boutons à TinyMCE?

J'ai suivi un didacticiel sur les Nettuts sur la façon d'ajouter un bouton personnalisé à TinyMCE ( http://net.tutsplus.com/tutorials/wordpress/wordpress-shortcodes-the-right-way/ )

Cela fonctionne très bien et tout, mais je veux ajouter de nombreux boutons et je me demande s’il existe un moyen intelligent de le faire sans avoir à dupliquer tout le code encore et encore.

Voici le code que j'utilise pour ajouter un bouton:

add_shortcode("quote", "quote");  
function quote( $atts, $content = null ) {  
    return '<div class="right text">"'.$content.'"</div>';  
}

add_action('init', 'add_button');  
function add_button() {  
   if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )  
   {  
     add_filter('mce_external_plugins', 'add_plugin');  
     add_filter('mce_buttons_3', 'register_button');  
   }  
}  
function register_button($buttons) {  
   array_Push($buttons, "quote");  
   return $buttons;  
}  
function add_plugin($plugin_array) {  
   $plugin_array['quote'] = get_bloginfo('template_url').'/js/customcodes.js';  
   return $plugin_array;  
}

Et puis je crée un fichier customcodes.js avec ce code dans:

(function() {  
    tinymce.create('tinymce.plugins.quote', {  
        init : function(ed, url) {  
            ed.addButton('quote', {  
                title : 'Add a Quote',  
                image : url+'/image.png',  
                onclick : function() {  
                     ed.selection.setContent('[quote]' + ed.selection.getContent() + '[/quote]');  

                }  
            });  
        },  
        createControl : function(n, cm) {  
            return null;  
        },  
    });  
    tinymce.PluginManager.add('quote', tinymce.plugins.quote);  
})();

Encore une fois, comment puis-je ajouter plusieurs boutons sans avoir à faire tout ce code pour chaque nouveau bouton?

Merci :) Sebastian

shortcodeeditortinymcebuttons
7
sebfck

Ajoutez d’abord vos boutons supplémentaires à l’intérieur des boutons de rappel.

function register_button($buttons) {  
   array_Push($buttons, "quote","wpse-rules");  
   return $buttons;  
}

Ensuite, ajoutez des boutons supplémentaires dans le plugin javascript.

    init : function(ed, url) {  
        ed.addButton('quote', {  
            title : 'Add a Quote',  
            image : url+'/image.png',  
            onclick : function() {  
                 ed.selection.setContent('[quote]' + ed.selection.getContent() + '[/quote]');  
            }  
        });
        ed.addButton('wpse-rules', {  
            title : 'WPSE Rules',  
            image : url+'/image.png',  
            onclick : function() {  
                 alert( 'WPSE Rules!' ); 
            }  
        });  
    },

Et ainsi de suite, pour tout bouton supplémentaire que vous voulez ..

5
t31os

Regardez QuickTag de wordpress, si vous voulez ajouter des boutons sur la section de l'éditeur de texte (cela ne fonctionne pas avec la partie éditeur visuel)

0
Soykot

Faites une lecture et/ou téléchargez les fichiers dans mon tutoriel à ce sujet . La raison pour laquelle je suggère que c'est parce que j'ai tout mis dans une classe afin que vous n'ayez pas réellement besoin d'écrire le code encore et encore pour chaque bouton!

Maintenant, la classe écrit le code pour vous chaque fois que vous l'instanciez du côté WordPress, mais vous aurez toujours besoin d'écrire les fonctionnalités javascript pour chaque bouton.

La création d'un bouton est le même processus, peu importe le nombre dont vous avez besoin. La fonction de chaque bouton va être unique, c'est pourquoi vous avez besoin d'un appel javascript unique pour chaque bouton.

0
Neil Davidson