Guru 2.0 › 3.0
Der Blog für alle die Spass am Web und Design haben…

Heute ist Samstag und wir haben ein wenig mehr Zeit uns mit unserem Blog zu beschäftigen. Daher habe ich mir gedacht wir bohren den Editor ein wenig auf und passen ihn so an, dass wir auch wirklich schnell und effektiv damit arbeiten können.

Wie du eigene Stile in der dritten (!) Symbolleiste hinzufügst und auch im Editor des DashBoards siehst, habe ich bereits im Post zu Den WYSIWYG-Editor anpassen beschrieben. Heute werden wir uns darum kümmern, einerseits Standardknöpfe in der 1. Symbolleiste hinzuzufügen und andererseits eine Art Textbaustein zu programmieren.

Stanardknöpfe zum Editor hinzufügen

Neue Knöpfe im WYSIWYG-Editor von WordPress

Fangen wir mit den Standardknöpfen an. Dies ist relativ einfach, da Du dazu die bekannte functions.php im aktiven Thema brauchst. Falls diese bei Dir nicht existiert, kannst Du sie einfach anlegen. Vergiss aber nicht in der ersten Zeile <?php und in der letzten Zeile ?> einzufügen. Jetzt kannst Du untenstehende Funktion einfügen und hast die zusätzlichen Knöpfe am Ende der ersten Symbolleiste. Wenn Die eine eigene Sortierung in der Symbolleiste haben willst, musst Du nur alle Knöpfe der Reihe nach aufführen und in die leeren eckigen Klammern der buttons-Elemente eine Index-Zahl schreiben. Der Index ist fortlaufend numeriert und beginnt bei 0 für den ersten Knopf.

1
2
3
4
5
6
7
8
9
10
11
12
13

//tinyMCE StandardButtons hinzufuegen
function guru20_AddButtons($buttons) {
  $buttons[] = 'fontselect';        //Schriftauswahl
  $buttons[] = 'fontsizeselect';  //Schriftgroesse
  $buttons[] = 'separator';        //Abstand
  $buttons[] = 'sup';                 //Hochstellen
  $buttons[] = 'sub';                 //Tiefstellen
  $buttons[] = 'separator';        //Abstand 
  $buttons[] = 'hr';                   //horizontale Linie
  $buttons[] = 'separator';        //Abstand
  return $buttons;
}
add_filter("mce_buttons", "guru20_AddButtons");

Nun stellt sich mir die Frage: Welche Knöpfe kann ich hinzufügen? Ganz einfach, hier ist die Liste aller möglichen Befehle, ohne dass Du ein zusätzliches PlugIn installieren musst.

• bold
• italic
• underline
• strikethrough
• justifyleft
• justifycenter
• justifyright
• justifyfull
• bullist
• numlist
• outdent
• indent
• cut
• copy
• paste
• undo
• redo
• link
• unlink
• image
• cleanup
• help
• code
• hr
• removeformat
• formatselect
• fontselect
• fontsizeselect
• styleselect
• sub
• sup
• forecolor
• backcolor
• forecolorpicker
• backcolorpicker
• charmap
• visualaid
• anchor
• newdocument
• blockquote
• separator
  oder |-Zeichen

Textbausteine für WordPress

Textbaustein für WordPress

Auch damit lässt sich der Editor verbessern. Gerade beim Schreiben von Posts, kommen immer wieder Standardformulierungen vor. Die einen speichern sie in irgendeinem Editor, die nächste verwenden ein Editorfenster, welches alle Texte enthält und löschen die nicht benötigten und die dritten schreiben die Texte jedesmal neu. Aber das muss ab jetzt nicht mehr sein, wir können uns nämlich Textbausteine in den Editor einfügen.

Da dieses Beispiel bereits aufwendig ist, habe ich auf ein extra Menü für mehrere Bausteine verzichtet. Aber wir bekommen zumindest einen Knopf der einen vorgegebenen Text an die Stelle des Cursors im Editor einfügt. Zuerst erweitern wir die functions.php um folgende Funktionen. Dies sind einige Zeilen an SourceCode welche erstellt werden müssen. Die Erklärungen für die wichtigsten Befehle findet ihr, wie immer in den Bemerkungen zum Code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

//Button erstellen und registrieren
//abhaengig von den Rechten des Benutzers
function guru20_AddAutoTextButton() {
  //Keine Rechte
  if (!current_user_can('edit_posts') && 
      !current_user_can('edit_pages')) { 
    return;
  }
  //Darf grafisch editieren
  if (get_user_option('rich_editing') == 'true') {
    add_filter('mce_external_plugins', 'guru20_AutoText_AddPlugIn');
    add_filter('mce_buttons', 'guru20_AutoText_RegisterPlugIn');
  }
}
//Button hinzufuegen
add_action('init', 'guru20_AddAutoTextButton');
 
//PlugIn hinzufuegen --> JS-Datei einbinden
function guru20_AutoText_AddPlugIn($plugin_array) {
  //Array der PlugIns von tinyMCE erweitern
  //js-Datei muss im aktiven Thema vorhanden sein.
  $plugin_array['guru20_AutoText'] = get_bloginfo('template_url').'/js/guru20_AutoText.js';
  return $plugin_array;
}
//PlugIn registrieren
function guru20_AutoText_RegisterPlugIn($buttons) {
  //Buttons am Ende anfuegen
  //array_push($buttons, "|", "guru20_AutoText");
  //Buttons am Anfang einfuegen
  array_unshift($buttons, "guru20_AutoText", "|");  
  return $buttons;
}
//Versionsnummer des Editors pruefen
function guru20_RefreshMCE($ver) {
  $ver += 3;
  return $ver;
}
//tinyMCE aktualisieren
add_filter('tiny_mce_version', 'guru20_RefreshMCE');

Nun legen wir im aktiven Thema ein Verzeichnis js/ an und dort die neue Datei guru20_AutoText.js. Diese enthält die gesamte Funktionalität des neuen Knopfes. Auch hier ist der gesamte SourceCode für die JavaScript-Datei mit den Erklärungen als Bemkerung direkt im Code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

/**
 * @author   Guru 2.0
 * @function Add AutoText to tinyMCE for WordPress
 * (c) 2011
 */
 
//anonyme Funktion
(function() {
	//Button erstellen
    tinymce.create('tinymce.plugins.guru20_AutoText', {
		//Button initialsieren
        init : function(ed, url) {
			//Button hinzufuegen
            ed.addButton('guru20_AutoText', {
				//title >> ToolTip des Buttons
				//image >> anzuzeigendex Bild im Format 16x16 Pixel
                title : 'AutoText',
                image : 'http://localhost/guru-20/wp-content/themes/guru_02/images/guru20_AutoText.png',
                onclick : function() {
					//Befehl des Buttons
					//das Editorfenster aktivieren
                    ed.focus();
					//Text an der aktiven Cursor-Position einfuegen
                    ed.selection.setContent('<div class="moreInfo"><h3>Für alle die mehr wissen wollen...</h3><p>Hier die Infos!</p></div>');
                }
            });
        }   
	});
	//PlugIn zum Editor hinzufuegen
    tinymce.PluginManager.add('guru20_AutoText', tinymce.plugins.guru20_AutoText);
})();

Ich denke der Post bringt euch wieder ein wenig mehr zur effektiven Arbeit mit eurem Blog. Wenn Du absolut keine Ahnung vom Programmieren hast. Kannst Du den Code wie wer ist in die erwähnten Dateien einfügen. Die einzigen Anpassungen, welche notwendig sind, findest Du in der Datei guru20_AutoText.js in der Zeile #18. Hier musst Du den Pfad und Dateinamen für die Grafik deines Knopfes anpassen. Und in der Zeile #24. Hier gibst Du in den Klammern den Text an, welcher eingefügt werden soll.