Wie ändere ich die Darstellung des WYSIWYG-Editors?

Der WYSIWYG-Editor kann so konfiguriert werden, dass die Anzeige des zu bearbeitenden Inhalts exakt der finalen Darstellung auf der Website entspricht. Dafür gibt es zwei Varianten:

Automatisch

Bei der automatischen Editor Styling Funktion, lädt der WYSIWYG-Editor automatisch die CSS-Dateien des aktuellen Themes. Zur Verwendung der automatischen Editor Styling Funktion muss unter Administration > Grundeinstellungen > WYSIWYG > Einstellungen lediglich die Option Berücksichtigung von spezifischen CSS aktiviert werden:

Vorteil	Nachteil

Vorteil	Nachteil
Die Funktion ist einfach und schnell eingerichtet.	Die Darstellung des zu bearbeitenden Inhalts im WYSIWYG-Editors entspricht nicht exakt der finalen Darstellung des Inhalts auf der Website, da nur die CSS-Dateien geladen werden, welche in der index.html Datei des Themes definiert sind.

Manuell

Bei der manuellen Editor Styling Funktion, kann das für den WYSIWYG-Editor zu verwendende CSS manuell definiert werden. Dazu können im jeweiligen Theme unter Administration > Layout > Theme Manager in der Datei component.yml folgende Optionen definiert werden:

Option	Beschreibung	Beispiel

Option	Beschreibung	Beispiel
bodyClass	CSS-Klasse, welche dem WYSIWYG-Editor zugewiesen werden soll. Damit kann dem zu bearbeitenden Inhalt im WYSIWYG-Editor eine übergeordnete CSS-Klasse zugewiesen werden.	`body-class`
bodyId	HTML-ID, welche dem WYSIWYG-Editor zugewiesen werden soll. Damit kann dem zu bearbeitenden Inhalt im WYSIWYG-Editor eine übergeordnete ID zugewiesen werden, über welche das CSS für die Darstellung des zu bearbeitenden Inhalts gesteuert werden kann.	`body-Id`
css	Pfad relativ zur Ablage des Themes zu einer CSS-Datei, welche für die Darstellung des zu bearbeitenden Inhalts geladen werden soll.	`wysiwyg.css`

Die Optionen werden über den Eintrag rendering in der Datei component.yml definiert. Falls in der component.yml der Eintrag rendering noch nicht vorhanden ist, so fügen Sie folgende Vorlage ein und passen Sie diese anschliessend nach Bedürfnis an:

rendering:
  wysiwyg:
    bodyClass: body-class
    bodyId: body-id
    css: wysiwyg.css

Beispiel:

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

Vorteil	Nachteil

Vorteil	Nachteil
Die Darstellung des zu bearbeitenden Inhalts im WYSIWYG-Editors entspricht exakt der finalen Darstellung des Inhalts auf der Website. Optional können mit dieser Technik ausgewählte Elemente (z.B. Grid-Layout) im WYSIWYG-Editor zur vereinfachten Bearbeitung visuell hervorgehoben werden.	Die Einrichtung ist zeitaufwändig und erfordert fortgeschrittene CSS-Kenntnisse.