WordPress kommt ja seit Version 2 mit dem implementierten WYSIWYG (was Du siehst, ist was Du bekommst) Editor TinyMCE. Aufgrund der Integration in WordPress sind nur wenige Schaltflächen und Funktionen in der Standard-Einstellung verfügbar. Wer Überschriften (h1
, h2
, …) will, geht schon leer aus. Auch die Bilderanordnung ist fehlerhaft. Da die Codeausgabe aber ordentlich und das Schreiben mit dem Editor bequem und anschaulich ist, macht die Verwendung von TinyMCE grundsätzlich Sinn.
In diesem Artikel will ich kurz erläutern, wie man den TinyMCE anpasst und erweitert, so dass er für die gängigen Bedürfnisse geeignet ist.
Achtung, diese Anleitung bezieht sich auf WordPress ursprünglich auf 2.0.x. In WP 2.1 wird nicht die Datei tiny_mce_gzip.php editiert, sondern die tiny_mce_config.php. Siehe dazu unteren Trackback. Auch die Formatauswahl sieht nun etwas übersichtlicher aus.
Also Dateien sichern. Änderungen auf eigene Gefahr.
Editor TinyMCE
Vorweg kurz hilfreiche Links. Übersichtsseite mit Erläuterungen zu TinyMCE sowie Entwicklerseite mit Plugins etc. bei SourceForge.
Überschriften (h1, h2, h3, ..) hinzufügen
In der Standard-Version sieht TinyMCE so aus:

Mit Überschriften ist da nix.
Es ist aber sehr einfach ein Dropdown-Feld mit Formatierungen wie h1, h2, ..., p, pre
, … anzeigen zu lassen. Denn der Editor TinyMCE hat im Grunde fast alle erdenklichen Schaltflächen „an Bord“. Da WordPress aber nur bestimmte erlaubt, sind Plugins etc. nicht ganz so einfach einzufügen. Denn meist blockiert WordPress die Anzeige der Schaltflächen.
Um die Überschriften freizuschalten muss man im Quellcode eine Kleinigkeit einfügen.
Die relevante Datei ist: ../wp-includes/js/tinymce/tiny_mce_gzip.php ../wp-includes/js/tinymce/tiny_mce_config.php.
Im letzten Drittel steht:
$mce_buttons = apply_filters(’mce_buttons’, array(’bold’, ‘italic’, ’strikethrough’, ’separator’, ‘bullist’, ‘numlist’, ‘outdent’, ‘indent’, ’separator’, ‘justifyleft’, ‘justifycenter’, ‘justifyright’ ,’separator’, ‘link’, ‘unlink’, ‘image’, ‘wordpress’, ’separator’, ‘undo’, ‘redo’, ‘code’, ‘wphelp’));
Hier kann man nun Schaltflächen entfernen oder bestimmte neue hinzufügen. Das Dropdown-Menü mit den Überschriften schaltet formatselect
frei.
Bei mir sieht die Leiste dann in etwa so aus:
$mce_buttons = apply_filters('mce_buttons', array('formatselect', 'separator', 'bold', 'italic', 'strikethrough', 'separator', 'bullist', 'numlist', 'separator', 'outdent', 'indent', 'separator', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'separator', 'separator', 'link', 'unlink', 'separator', 'image', 'separator', 'undo', 'redo', 'separator', 'separator', 'code', 'wphelp'));
Welche Standard-Buttons man hinzufügen kann, steht hier.
TinyMCE Anpassen
So nun findet man links ein Dropdown-Menü mit Überschriften von h1
bis h6
und anderem.
Wer nun einen Autor oder Kunden hat, dem das vielleicht verwirrt und der nur normal p
und h2, h3
-Überschriften benutzen soll (h1
ist ja bereits der Titel), für den muss man noch etwas anpassen.
Die relevante Datei findet man unter ../wp-includes/ js/ tinymce/ themes/ advanced/ editor_template.js.In der ersten ganz langen Zeile sind alle Buttons mit Grafikname und Alttext (Variablen für die Sprachdatei) aufgeführt.
Nun stehen ziemlich am Anfang der langen Datei übersichtlich untereinander die relevanten Auswahlmöglichkeiten.
Die entsprechende Zeile kann dann für das Dropdown-Menü so aussehen:
var lookup = [ ['p', 'normaler Absatz'], ['h2', 'Überschrift 2.Ebene'], ['h3', 'Überschrift 3.Ebene'] ];
Das Menü von tinyMCE sieht dann so aus:

Für Grafiken statt align eine class vergeben
Fügt man mit TinyMCE Grafiken wie Bilder ein und will diese linksbündig oder rechts angeordnet haben, so fügt TinyMCE in den img
-Tag ein align
ein.
Besser wäre eine class, welche man dann per css ansprechen könnte. Dann kann man leicht Abstände etc. individuell regeln.
Erster Schritt
Zuerst muss man TinyMCE dazu bringen statt align
class
einzufügen, wenn Bilder positioniert werden sollen.
WP < 2.1
Die relevante Datei ist tiny_mce.js in Zeile 2467. Hier das erste align durch class ersetzen:
tinyMCE.setAttrib(this.imgElement, 'class', align);
Nun füht TinyMCE immer class="..."
ein.
WP > 2.0
In tiny_mce.js
befindet sich der relevante Abschnitt ab Zeilen 2708. Auch die Datei themes/ advanced/ jscripts/ image.js
sieht nach einem Ansatzpunkt aus.Leider konnte ich es auf die Schnelle nicht lösen. Kommentare dazu willkommen.
In zwei kompetenten Kommentaren wird das Prozedere genau erläutert. Bitte dort weiterlesen; Sicherheitskopie nicht vergessen.
Zweiter Schritt
Für Bilder macht es meines Erachtens nur Sinn, sie entweder links oder rechts zu floaten oder ihnen eine ganze Zeile einzuräumen.
TinyMCE bietet aber für Kunden viel zu viel Varianten im Auswahlfenster an.
Diese kann man eingrenzen. In der Datei ../wp-includes/ js/ tinymce/ themes/ advanced/ image.htm kürzt man im letzten Drittel die Optionenliste wie folgt:
<td nowrap="nowrap">Anordnung:</td> <td> <select name="align"> <option value="">Ganze Zeile</option> <option value="left">links im Textfluss</option> <option value="right">rechts im Textfluss</option> </select> </td>
Nunmehr sieht das Bildfenster wie folgt aus:

Nun kann man in der css-Datei für img.left
und img.right
ganz einfach die Bilder positionieren.
Sauber.
Nun kann man das noch steigern, wenn man es für Benutzer noch eindeutiger gestalten will. Denn diese werden mit der Bilderverwaltung direkt unter dem Artikel die Grafiken in den text einfügen. Die genaue URL weiß natürlich kaum ein Autor. Dann ändert man am besten die Reihenfolge der Zeilen und färbt die URL-Zeile in passives grau.

Buttons mit deutschen Bezeichnungen für kursiv und fett
Die Buttons mit F für Fettschrift und K für kursiv gibt’s bereits. Sie liegen im Ordner ../wp-includes/ js/ tinymce/ themes/ advanced/ images/ und heißen bold_de_se.gif
bzw. italic_de_se.gif
.
In der Datei ../wp-includes/ js/ tinymce/ themes/ advanced/editor_template.js muss man die Platzhalter für die Grafiken (gekennzeichnet durch {…}) durch bold_de_se.gif
etc. ersetzen.
Alternativ kann man auch die komplette Sprachversion ändern. Die de.js-Dateien gibt’s bei SourceForge. Aber es muss an einigen Stellen geändert werden, also Zeit einkalkulieren.
Ziate (blockquote) in TinyMCE einfügen
Die Zitatefunktion geht mit dem Tastenkürzel „alt + q“ oder dem Einzugsbutton bereits. Ja, so einfach. Nur erkennen/ wissen muss man das erstmal.
Wir haben daher den Einzugsbutton bearbeitet und ihn einfach halbiert. Das sieht im Ergebnis so aus:

Weiterlesen
Da es zu diesem Thema kaum hilfreiche Infos gibt, auch nicht in den einschlägigen Foren, bleiben hier nur wenige Verweise.
Expertinnen-web hat das Einfügen von formatselect kurz beschrieben.
Einen netten Dateimanager bietet MP:Blog.
Kommentare zu WordPress-Editor TinyMCE anpassen, erweitern
1. Kommentar
Wordpress-WYSIWYG-Editor TinyMCE anpassen » die Netzspielw |
2. Kommentar
jim |
3. Kommentar
Wordpress eindeutschen » Blog Archive » TinyMCE erwe |
4. Kommentar
Wordpress eindeutschen » Blog Archive » TinyMCE erwe |
5. Kommentar
Wordpress als CMS - ein Praxisbeispiel » Netprofit |
6. Kommentar
Nils Schulte am Hülse |
7. Kommentar
Robert Hartl |
8. Kommentar
Nils Schulte am Hülse |
9. Kommentar
Robert Hartl |
10. Kommentar
Alex / Wakü Netzteil |
11. Kommentar
Peter |
12. Kommentar
Robert Hartl |
13. Kommentar
Mathias |
14. Kommentar
Homepageerstellung » Sinnvolle Wordpress Plugins - Teil 2 |
15. Kommentar
Kölner Computer Blog » Blog Archive » Wordpress Beit |
16. Kommentar
Wordpress: überflüssige Elemente einfach ausblenden » Netp |
17. Kommentar
Alexander Hahn |
18. Kommentar
Robert Hartl |
19. Kommentar
del.izi.oes am 03.04.07 at kleinski // |
20. Kommentar
Conny |
21. Kommentar
Herr Honk |
22. Kommentar
CHESHiRE |
23. Kommentar
Robert Hartl |
24. Kommentar
CHESHiRE |
25. Kommentar
Bastian |
26. Kommentar
Robert Hartl |
27. Kommentar
Bastian |
28. Kommentar
Robert Hartl |
img.left{ float:left; margin:5px 10px 0 0;}
img.right{ float:right; margin:5px 0 0 10px;}
29. Kommentar
Bastian |
30. Kommentar
Robert Hartl |
31. Kommentar
Steini |
32. Kommentar
Steini |
33. Kommentar
Rainer |
34. Kommentar
Robert Hartl |
35. Kommentar
Herbert A. Eberth |
36. Kommentar
Robert Hartl |
37. Kommentar
kaiser |
38. Kommentar
kaiser |
39. Kommentar
Robert Hartl |
40. Kommentar
kaiser |
41. Kommentar
kaiser |
42. Kommentar
Robert Hartl |
43. Kommentar
laxu » Blog Archive » Pastedate TinyMCE-Plugin |
44. Kommentar
Silkester erzählt » Blog Archive » Der visuelle Beit |
45. Kommentar
Linkdump 2007-01-14 « Data Travelers-Blog |
46. Kommentar
kaepten’s log » TinyMCE - Worpress Editor erweitern |
47. Kommentar
Texteditor zum Verfassen von Blogs | Blogging, Internet und Webp |
48. Kommentar
tsedeke |
49. Kommentar
Wordpress TinyMCE Editor um Styles erweitern at darmstädterFiltr |
50. Kommentar
Wordpress: überflüssige Elemente einfach ausblenden |
51. Kommentar
Wordpress als CMS |