CSS Styles in WYSIWYG Editoren benutzen
WYSIWYG steht für das Prinzip What You See Is What You Get („Was du siehst, ist, was du bekommst.“). Das funktioniert grundsätzlich auch ganz gut. Nur kann man in vielen fällen die CSS Klassen nicht richtig verwenden oder ein noch häufiger auftretendes Problem, das Layout im Editor entspricht nicht dem Ergebnis auf der Seite. Das liegt am häufigsten aber nur an einer fehlerhaften oder nicht vorhandenen CSS-Datei die speziell für den Editor optimiert ist.
Als Editor für Joomla! empfehle ich den JCE Editor von Ryan Demmer. Dieser bietet zahlreiche Funktionen und Einstellungmöglichkeiten und kommt auch sehr gut mit den YAML-Stylesheets zurecht.
Ebenfalls empfehle ich zum bearbeiten von Inhalten den Firefox zu verwenden, da es mit diesem am wenigsten Probleme gibt. Es sollte zumindest der Internet Explorer vermieden werden, da keine IE-Hacks (Patch-Dateien) in den Editor eingefügt werden können.
In der JYAML Design-Konfiguration findet man bei den CSS-Dateien unter editor/ eine editor_content.css, die zum einbinden für den Editor bereits vorbereitet ist.
Die editor_content-rtl.css ist in Verbindung mit RTL-Sprachen zu verwenden.
Mindestanforderung
Zuerst einmal muss gewährleistet werden, dass alle notwendigen Basis-Stylesheets eingebunden werden. Dazu ist mindestens folgender, bereits in JYAML vorbereiteter CSS-Code, notwendig.
/* Import required stylesheets */
@import url(../../../yaml/core/slim_base.css);
@import url(../../../yaml/core/slim_base-rtl.css); /* editor_content-rtl.css */
@import url(../screen/basemod.css);
@import url(../screen/content.css);
@import url(../../../yaml/editor/editor_base.css);
/* RTL: editor_base-rtl.css */
Die slim_base.css lädt alle YAML-Basis Bestandteile die notwendig sind. Durch das einbinden der basemod.css und content.css werden alles Styles geladen und im Editor im entsprechenden angezeigt. Die editor_base.css entfernt zum Beispiel überflüssige Seitenränder, setzt den Hintergrund in weiß und hebt z.B. die .flaotbox Klasse hervor um bessere Übersichtlichkeit zu gewährleisten.
Durch das importieren mit der @import CSS-Anweisung werden die Styles (in den meisten Browsern und WYSIWYG-Editoren) aber noch nicht in der Liste angezeigt. Das ist auch gewollt und gut so. Denn somit kann man selbst sehr einfach beeinflussen welche Styles in der Auswahlbox des Editor erscheinen sollen.
Styles in die Auswahlbox hinzufügen
Durch den oben aufgeführten CSS-Code der Mindestanforderung wird zwar alles richtig angezeigt, aber die CSS-Klassen bzw. CSS-Styles sind noch nicht anwählbar. In der editor_content.css bzw. editor-content-rtl.css sind bereits die einige Klassen vorbereitet.
.float_left {}
.float_right {}
.center {}
.note {}
.important {}
.warning {}
.readon {}
.text-to-rtl {}
.skip {}
.hideme {}
.print {}
Die CSS-Klassen können alle ohne Zuweisung von Eigenschaften eingefügt werden, da diese ja bereits in der content.css oder basemod.css definiert sind. Es können aber jederzeit Anpassungen vorgenommen werden, indem man in die jeweilig geschweifte Klammer eine CSS-Eigenschaft einfügt.
Konfiguration der WYSIWYG Editoren
Hier wird kurz beschrieben, wie man in die wichtigsten Editoren die editor_content.css richtig einbindet. Es wird davon ausgegangen das der Editor ordnungsgemäß funktioniert und alle notwendigen Extensions oder auch Plugins installiert sind.
Wenn keine Änderungen nach dem speichern der Einstellungen sichtbar sind, versuchen Sie den Browsercache zu leeren und aktualisieren Sie die Seite.
JCE - Der Joomla! Content Editor (meine Empfehlung)
Meine Empfehlung:
Der JCE hat hat bisher die wenigsten Probleme im Umgang mit Stylesheets und der Darstellung von speziellen Inhalten wie zum Beispiel den YAML-Subtemplates.
Gehen Sie zunächst im Backend-Hauptmenü auf Components bzw. Komponenten -> JCE Administration -> Configuration.
Führen Sie nun folgende Einstellungen durch um die editor_content.css zu aktivieren.
- Benutze Template CSS/Use Template CSS
= Nein/No.
- Benutze eigene CSS Datei/Use Custom CSS File
= templates/$template/css/default/editor/editor_content.css
TinyMCE - Der Joomla! interne Editor
Gehen Sie im Backend-Hauptmenü auf Plugins.
Sie bekommen nun eine Liste mit allen Plugins aufgelistet. Suchen Sie den Eintrag "Editor - TinyMCE 2.0" (der Name kann leicht Abweichen) und klicken Sie darauf um die Einstellungen zu bearbeiten. Führen Sie nun folgende Einstellungen durch um die editor_content.css zu aktivieren.
- Template CSS Klassen/Template CSS classes
= Nein/No
- Eigene CSS Klassen/Custom CSS Classes
= [/joomla_unteroder]/templates/hm_yaml/css/default/editor/editor_content.css
[/joomla_unterorder] ist nur als Platzhalter angemerkt, falls Ihre Joomla! Installation nicht im Hauptverzeichnis Ihres Webspaces liegt.
hm_yaml muss entsprechend angepasst werden, falls Sie das Template umbenannt haben.
