Text im WP TinyMCE-Editor nach seinen Wünschen formatieren

Verfasst von Mattias Stiller am 09. September 2011 | Wordpress | Keine Kommentare
Funktion: add_editor_style(); Wordpress Tutorial

Seit Wordpress 3.0 gibt es die Möglichkeit mittels der Funktion add_editor_style() den Text im Wordpress-Editor nach seinen Wünschen anzupassen. Das hat insofern seinen Sinn, dass man nur sehr leicht seinen Kunden das gleiche Look & Feel wie im Frontend auch im Backend geben kann.

Alles was wir nun brauchen ist die Funktion add_editor_style(). Den folgen Code müsst ihr nur in die functions.php einfügen und schon greift der Wordpress-Editor auf die editor-style.css Datei zu. Welche im Themeordner platziert werden muss.

  1. add_editor_style();

Ohne einen Wert in der Klammer versucht Wordpress eine CSS-Datei mit dem Namen „editor-style.css“ im Themeordner zu suchen. An dieser Stelle kann man jetzt auch einfach einen Wunschwert eintragen und die jeweilige CSS-Datei umbennen:

  1. add_editor_style('custom-name.css');

Anschließend muss man nur noch die Datei custom-name.css in den jeweiligen Themeordner ablegen und schon greift der Wordpress-Editor auf diese Datei zurück. Die neue CSS-Datei bezieht sieh ausschließlich auf den TinyMCE Editor im Backend. Die neue CSS-Datei hat keine Auswirkung auf das Frontend von Wordpress.

Sehen wir uns mal ein kleines Beispiel für so eine CSS-Datei an:

  1. html .mceContentBody {
  2. max-width:800px;
  3. }
  4. * {
  5. font-family: "Lucida Sans Unicode", Arial, sans-serif;
  6. color: #545454;
  7. line-height: 20px; font-size: 20px;}
  8. ul {
  9. list-style: square;
  10. margin: 0 0 18px -18px;
  11. }
  12. strong {
  13. font-weight: bold;
  14. color: #000;
  15. }
  16. a:link {
  17. color:#f9f9f9;
  18. }
  19. a:visited {
  20. color:#4f4f4f4;
  21. }
  22. ...

Sehr interessant ist der erste Wert html .mceContentBody. Dieser weist dem Editor eine feste Breite zu. Sehr angenehm, wenn man hier den gleichen Wert wie für den Contentbereich des Frontends nimmt. Die CSS-Befehlen können nun nach Belieben erweitert werden und dem Frontend bzw. seinem Empfinden nach angepasst werden.

Sorry, the comment form is closed at this time.