WordPress-Editor TinyMCE anpassen, erweitern

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:

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 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.

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.

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: