WordPress Editor TinyMCE optimieren

voku

14 years ago

This blog post has been published on 2010-10-16 and may be out of date.

In diesem Blog-Post beschreibe ich, wie du den Editor von WordPress verbessern kannst und somit auch deine Beiträge interessanter & übersichtlicher gestalten kannst.

1.) TinyMCE Advanced

Als erstes installieren wir “TinyMCE Advanced“, dieses Plugin erweitert den Funktionsumfang des WordPress-Editors.

Advanced hr
Advanced Image
Advanced Link
Kontextmenü
Emotionen (Smilies)
Datum und Uhrzeit
IESpell
Layer
Nonbreaking
Drucken
“Suchen und Ersetzen”
Tabellen
Visual Charaktere
XHTML Extras
[…]

Diese Funktionen kannst du nun per “drag and drop” in der TinyMCE-Symbolleisten organisieren, indem du im Admin-Bereich unter “Einstellungen” -> “TinyMCE Advanced” folgende Optionen findest.

Des-weitern hat das Organisieren der Symbole noch den Vorteil, dass man den Editor auch auf kleinen Auslösungen (z.B. mit Netbook) verwenden kann, dazu wird passend zu deiner Auflösung angezeigt, wie viele Symbole du in einer Zeile einstellen kannst. (alternativ kann man auch im “Vollbildschirmmodus” einen Blog-Post erstellen)

Im linken Bild siehst du, was ich zuvor beschrieben habe (Optionen – 1), unter diesen Optionen findet man auch noch das rechte Bild (Optionen – 2). Dort kannst du “Advanced Image”, “Advanced Link” und das “Kontextmenü” aktivieren, außerdem kannst du eigene CSS-Klassen (Styles) erstellen, welche dann im Editor verwendet werden können. Zu guter letzt kann man dem Editor noch beibringen “p-” / “br”-Tags nicht einfach zu entfernen. ;-)

2.) Special Text Boxes

Als nächstes installieren wir “Special Text Boxes“, mit diesem Plugin können wir nun schöne “Warnungen”, “Hinweise” etc. in unseren Blog-Posts einfügen.

3.) WP-Syntax & WP-Syntax Button

Als nächstes installieren wir diese beiden Plugin (WP-Syntax & WP-Syntax Button), so dass wir Quelltexte besser darstellen können.

Tipp: Wenn du Probleme beim Einfügen von Quelltexten hast, da WordPress den ganze Code zusammenfasst und die Einrückungen dann weg sind, wechsel einfach in den HTML-Modus und füge dort den Quelltext ein und verwende dort den Button “pre (WP-Syntax)”, um das highliting zu aktivieren.