Wie füge ich TinyMCE mehrere Schaltflächen hinzu?

Ich habe ein Tutorial zu Nettuts zum Hinzufügen einer benutzerdefinierten Schaltfläche zu TinyMCE befolgt ( http://net.tutsplus.com/tutorials/wordpress/wordpress-shortcodes-the-right-way/ ).

Es funktioniert großartig und alles, aber ich möchte viele Schaltflächen hinzufügen und ich frage mich, ob es eine clevere Möglichkeit gibt, dies zu tun, ohne den gesamten Code immer wieder duplizieren zu müssen.

Hier ist der Code, den ich zum Hinzufügen einer Schaltfläche verwende:

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;  
}

Und dann erstelle ich eine customcodes.js-Datei mit diesem Code in:

(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);  
})();

Wie kann ich also wieder mehrere Schaltflächen hinzufügen, ohne den gesamten Code für jede neue Schaltfläche ausführen zu müssen?

Danke :) Sebastian

Fügen Sie zuerst Ihre zusätzlichen Schaltflächen in den Schaltflächenrückruf ein.

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

Fügen Sie dann zusätzliche Schaltflächenfunktionen in das Plugin Javascript ein.

    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!' ); 
            }  
        });  
    },

Und so weiter für alle zusätzlichen Schaltflächen, die Sie möchten.

Lesen Sie die Dateien in meinem Tutorial durch und / oder laden Sie sie herunter . Der Grund, warum ich dies vorschlage, ist, dass ich alles in eine Klasse eingefügt habe, sodass Sie den Code nicht für jede Schaltfläche immer wieder schreiben müssen!

Jetzt schreibt die Klasse den Code grundsätzlich jedes Mal für Sie, wenn Sie ihn auf der WordPress-Seite instanziieren. Sie müssen jedoch weiterhin die Javascript-Funktionen für jede Schaltfläche schreiben.

Das Erstellen einer Schaltfläche ist der gleiche Vorgang, egal wie viele Sie benötigen. Die Funktion jeder Schaltfläche wird eindeutig sein, weshalb Sie für jede Schaltfläche einen eindeutigen Javascript-Aufruf benötigen.

Schauen Sie sich QuickTag von WordPress an, wenn Sie Schaltflächen im Texteditor hinzufügen möchten (funktioniert jedoch nicht im visuellen Editor-Teil).