WordPress Editor TinyMCE optimieren

closeDieser Beitrag wurde vor mehr als drei Monaten veröffentlicht. Bedenke bitte, dass die hier angebotene Information nicht mehr aktuell und gültig sein könnte. Informiere dich daher bitte auch an anderer Stelle über dieses Thema. Sollten sich neue Informationen ergeben haben, so kannst du mich auch gerne auf diese über einen Kommentar hinweisen. Vielen Dank!

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)


TinyMCE Advanced - Optionen
TinyMCE Advanced - Optionen - 1


TinyMCE Advanced - Optionen - 2
TinyMCE Advanced - Optionen - 2




 

 

 

 

 

 

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.


WP-Syntax
WP-Syntax


Beispiele:

 

 

 

 

 

 

 










Wenn jemand noch weitere hilfreiche Tipps & Tricks zum Thema “WordPress Editor” kennt, würde ich diese gerne hören…

  • http://twitter.com/sonnenhexer Michael Kupfer

    Danke für die Tipps

  • http://twitter.com/jochenbake Jochen Bake

    Hallo,
    ich habe auch Special Text Boxes installiert. Klappt soweit ganz gut, doch wie kann ich weitere Boxen hinzufügen. Im Texteditor werden ja nur 7 dargestellt.

    Benutzerdefiniert habe ich auch geändert, doch genau dort suche ich speichern als. Anscheinend kann man nur das eine Benutzerdefinierte verändern.

    Jochen
    http://www.jochenbake.de

  • http://suckup.de/ Lars Moelleken

    weiter Infos findest du hier -> http://www.simplelib.com/?p=11

  • http://www.spondeus.de Flo

    Hallo,
    haarscharf OT, aber vielleicht fällt dir ja etwas dazu ein – in meinem html-Editor springt die Anzeige alle zwei Sekunden hoch zum Anfang. Das ist sehr anstrengend …
    Das kann man doch bestimmt irgendwo ausschalten?

    Stefan