Der WYSIWYG-Editor hat mehrere Einstellungsmöglichkeiten. Wenn man sich im Backend eingeloggt hat, findet man die Einstellungsmöglichkeiten in der Navigation unter Administration -> Grundeinstellungen -> WYSIWYG ->Einstellungen.



Die Einstellung "Berücksichtigung von spezifischen CSS" erlaubt es dem WYSIWYG-Editor die CSS Dateien zu laden, die man in der index.html eingebunden hat. Dies hat den Vorteil, dass der Inhalt des Editors aussieht wie die Ausgabe der Webseite. Die Option "Aktuellen Inhalt im WYSIWYG ersetzen" setzt den Standardwert bei der Option "Aktuellen Inhalt ersetzen" beim einfügen von WYSIWYG-Vorlagen.




Zusätzlich zu diesen Einstellungsmöglichkeiten kann man am WYSIWYG-Editor Templatespezifische Einstellungen vornehmen. Um zu diesen Optionen zu gelangen muss man im Backend zu folgendem Punkt navigieren: Administration -> Layout -> gewünschtes Template bearbeiten -> component.yml




In dieser Datei sind diverse Informationen über das Template enthalten. In diese Datei kann man nun folgenden Code einfügen, falls noch nicht vorhanden:

 

rendering: { wysiwyg: { bodyClass: body-class, bodyId: body-id, css: wysiwyg.css } }

 
Die Option "bodyClass" erlaubt es eine spezifische Klasse dem WYSIWYG-Editor zuzuweisen, die man dann per CSS ansprechen kann. Die "bodyId" definiert eine Id die dem WYSIWYG-Editor zugewiesen wird, dadurch wird der Editor eindeutig identifizierbar. Als letzte Einstellungsmöglichkeit kann man der Einstellung "css" eine CSS-Datei angeben. Der Pfad zu dieser CSS-Datei geht vom gewählten Tempalte-Verzeichnis aus. Dies bedeutet, wenn man die Datei im Hauptverzeichnis des Templates erstellt, kann man nur den Namen der Datei angeben. Die angegebene CSS-Datei wird im WYSIWYG-Editor geladen und berücksichtigt, so kann man spezifische Design Anpassungen für den WYSIWYG erstellen.