History

Vorhandene Stylesheets in TinyMCE nutzbar machen

Wer mit Stylesheets im Text arbeiten will, ohne ständig den HTML-Code von TinyMCE aufzurufen, kann sich die gewünschten Stylesheets ganz einfach in den Editor reinbasteln. Wenn ein Stylesheet namens basic.css existiert, wird es automatisch in TinyMCE eingelesen. Die Klassen dieses Stylesheets können dann aus dem Drop-Down Menü ausgewählt werden ohne dass die TinyMCE Konfiguration angepasst werden muss.

Vorweg

Die nachfolgend beschriebenen Änderungen können (müssen aber nicht) bei einem TL-Update verloren gehen, falls z.B. TinyMCE aktualisiert wird. Ggf. also von den Änderungen ein Backup anlegen. Damit auch tl-Einsteiger damit klar kommen, hier eine

Schritt-für-Schritt-Anleitung:

  1. Verzeichnis system - config öffnen
  2. tinyMCE.php in einen Editor laden
  3. nach dem Eintrag event_elements : "[...]" suchen, darunter eine Leerzeile einfügen (ginge wohl auch an anderer Stelle, aber hier weiß ich, dass es sicher funktioniert…)
  4. theme_advanced_styles : "[...]", einfügen, DAS KOMMA NICHT VERGESSEN
  5. Die [...]-Liste mit den gewünschten Einträgen füllen: [Angezeigter Name=Style;...usw.]
  6. KEINE ZEILENUMBRÜCHE REINBAUEN, Änderungen speichern

Am besten alles (auch den Browser) schließen und neu loslegen. TinyMCE bietet die Styles dann oben im Selektor an. Die werden einfach eingefügt, es findet also keine Prüfung statt, ob der Style wirklich da ist. Daher kann man sich da auch problemlos STyles aus verschiedenen Stylesheets hineinlegen - ist nur eine Eingabehilfe.

WYSIWYG einrichten

Wer im Editor sehen will, wie es formatiert aussieht, kann das ebenfalls leicht einstellen:

  1. Im Stylesheet für TinyMCE (system\themes\tinymce.css) den body mit einer Basis-Fontgröße ausstatten, wenn mit em gearbeitet wird, z.B. so:
/* TYPOlight TinyMCE content CSS file */
body { color:#666966; background:none !important; background-color:#ffffff !important; font-size:12pt;}
  1. In der eingangs erwähnten tinyMCE.php den Eintrag content_css suchen
  2. Den Pfad zu den gewünschten Stylesheets in der Aufzählung ergänzen, z.B. so:
content_css : "<?php echo TL_PATH; ?>/tl_files/mein.css,<?php echo TL_PATH; ?>/system/themes/tinymce.css",

Hier wird statt der o.a. basic.css die Vorlage tl_files/mein.css verwendet (bzw. basic.css durch mein.css ersetzt). Weitere Stylesheets können ggf. wieder (s.o.) mit Kommas in die Aufzählung ergänzt werden. * Wichtig: * Den Basispfad nicht vergessen!

  1. Auch hier gilt: Keine Zeilenumbrüche einbauen!

Weitere Einstellungsmöglichkeiten

  • Der Eintrag height legt die Höhe des Eingabefensters fest. Standard ist 300
  • Wer statt weicher Zeilenumbrüche (br) echte Absätze vorzieht, sollte die Einstellungen von force_br_newlines und force_p_newlines vertauschen (true/false) - Seit TL 2.6 kann das auch in den Einstellungen (Neue Zeilen mittels Absätzen erstellen) gesetzt werden!
  • Wer die Größe des Eingabefensters verändert und der Editor soll sich das merken, dann theme_advanced_resizing_use_cookie auf „true“ setzen
  • Wer im HTML-Teil Tags verwendet, die der Editor beim Speichern rausfiltert, sollte sich mal den Eintrag extended_valid_elements ansehen (und ggf. auch die Einstellungen von TL, Erlaubte HTML Tags)
  • Im Eintrag spellchecker_languages kann man sich die Liste verkürzen und mit einem „+“ vor dem gewünschten Eintrag den Standard einstellen (+German=de für Deutsch)

--- Tutorial erstellt von Nosi

Also available in: HTML TXT