...
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 |
|---|---|
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 |
|---|---|---|
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. |
|
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. |
|
css | Pfad relativ zur Ablage des Themes zu einer CSS-Datei, welche für die Darstellung des zu bearbeitenden Inhalts geladen werden soll. |
|
Die Optionen werden über den Eintrag rendering in der Datei component.yml definiert. Falls in der component.yml-Datei der Eintrag rendering noch nicht vorhanden ist, so fügen Sie folgende Vorlage ein und passen Sie diese anschliessend nach Bedürfnis an:
| Codeblock | ||
|---|---|---|
| ||
rendering:
wysiwyg:
bodyClass: body-class
bodyId: body-id
css: wysiwyg.css |
Beispiel:
| Codeblock | ||
|---|---|---|
| ||
rendering: { wysiwyg: { bodyClass: body-class, bodyId: body-id, css: wysiwyg.css } } |
Beispiel:
...
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. |