Button zu WordPress Rich-Editor hinzufügen

Wie kann man einen Button zu WordPress Rich-Editor hinzufügen ?

WordPress bietet einen für Web-Verhältnisse komfortablen Editor an, den TinyMCE Editor, um Artikel zu schreiben oder Kommentare abzugeben. Wer selbst Funktionen zu diesem Editor hinzufügen möchte muss ein kleines TinyMCe Plugin programmieren. Wie man einen Button in der Symbolleiste des TinyMCE Editors ergänzt und entsprechende Funktionen hinterlegt, zeige ich in folgendem kleinen Tutorial.

Im ersten Schritt definiert man zwei Funktionen, die zum einen den Verweis auf den Button für den TinyMCE Editor ergänzen und zum anderen dafür sorgen, dass ein kleines TinyMCE Plugin geladen wird.  Diese beiden Funktionen ergänzt man am besten in der Hauptdatei des eigenen Plugins.

// functions for adding a button and plugin to richeditor
function add_button($b) { 
   array_push($b, 'mybutton'); 
   return $b;
}

function add_plugin($plugins) { 
  $plugins['tmce_plugin']=plugins_url('//cdn1.tuxlog.de/tmce_plugin.js',__FILE__);
  return $plugins; 
}

Dann bindet man beide Funktionen über die Init-Funktion des eigenen Plugins ein.

// plugin init funktion
function myplugin_init(){  
   // add button to richeditor 
   add_filter('mce_buttons', 'add_button'); 
   add_filter('mce_external_plugins', 'add_plugin'); 
}

Und natürlich muss auch die Init-Funktion des eigenen Plugins aufgerufen werden.

// init plugin
add_action('init', 'myplugin_init');

Jetzt fehlt nur noch das Stück Javascript für das Plugin. In unserem Fall gehört der Javascript-Teil in die Datei tmce_plugin.js im Verzeichnis des eigenen WordPress-Plugins.

(function() {
  (function() { 
    tinymce.PluginManager.add( 'mybutton', 
      function( editor, url ) {        
        // Add Button to Visual Editor Toolbar
        editor.addButton('mybutton', {
          title: 'Insert fancy text',            
          tooltip: "My shiny button",            
          image: url + '//cdn1.tuxlog.de/mybutton.png',            
          type: 'button',            
          onclick: function () {
            editor.insertContent('Fancy text'); 
          }
       }        
     });
}}

Das Pluign spezifiziert das Bild, das den Button in der Symbolleiste des Editors darstellt, sowie die Textdarstellung und den Text für den Tooltip. In den Zeilen hinter „onclick:“ wird angegeben was ein Klick auf den Button bewirken soll. In unserem Fall wird einfach der Text ‚Fancy Text‘ im Editor ergänzt.

Kurz zusammengefasst:

In der Init-Funktion des WordPress Plugins ruft man zwei Funktionen auf, die eine Verbindung zur Javascript Datei herstellen und den neuen Knopf definieren. In der Javascript-Datei gibt man alle Eigenschaften des Knopfs und die auszulösende Funktion an.