Seitenvergleich

...

...

Für die Pflege der Inhalte steht bei Cloudrexx ein WYSIWYG-Editor zur Verfügung:

...

Der WYSIWYG-Editor verfügt über Vorlagen, sogenannte Bausteine, mit welchen auf einfache Art und Weise neuer Inhalt erstellt werden kann.

...

Verwaltung

Die Vorlagen des WYSIWYG-Editors können bei Cloudrexx bearbeitet werden. Öffnen Sie dazu den Bereich Administration > Grundeinstellungen > WYSIWYG

...

In der Übersicht sehen Sie alle bestehenden Vorlagen. Sie haben hier die Möglichkeit neue Vorlagen hinzuzufügen oder bestehende Vorlagen zu deaktivieren, zu editieren oder zu löschen.

Bei der Erfassung einer neuen Vorlage oder Bearbeitung einer Bestehenden, kann nebst der eigentlichen Vorlage (HTML-Code), ein Titel, eine Beschreibung, sowie ein Vorschaubbild zur einfachen Wiederauffindung definiert werden:

...

Spezifisch pro Webdesign Template

Alternativ zur Erfassung und Pflege der Vorlagen in der Adminkonsole, können pro Webdesign Template individuelle Vorlagen definiert werden. So stehen z.B. im Content Manager je nach aktuell (der zu bearbeitenden Inhaltsseite) zugewiesenem Webdesign Template, dessen spezifischen Vorlagen zur Nutzung bereit.

Die Vorlagen werden im jeweiligen Webdesign Template in der Datei Wysiwyg.yml (Ablage im Hauptverzeichnis des Webdesign Templates) definiert. Die Datei nutzt das folgende YAML-Format

Templates:

  -

    title: Bild und Titel

    image: /images/Wysiwyg/template1.gif

    description: Bild mit einem Titel und Text, der das Bild umfliesst.

    html: <h3><img src=" " alt="" style="margin-right: 10px" height="100" width="100" align="left" />Hier den Titel einfügen</h3><p>Hier den Text einfügen</p>

  -

    title: Zwei Spalten mit Titel

    image: /images/Wysiwyg/template2.gif

    description: Zwei Spalten, die beide einen Titel und Text beinhalten.

    html: <div class="row"><div class="col-md-6"><h2>Hier den Titel einfügen</h2>Hier den Text einfügen <br/> </div><div class="col-md-6"><h2 >Title</h2>Hier den Text einfügen <br/></div></div>Text goes here

  -

    title: Text und Tabelle

    image: /images/Wysiwyg/template3.gif

    description: Ein Titel mit Text und einer Tabelle.

    html: <div style="width: 80%"><h3>Hier den Titel einfügen</h3><table style="width:150px;float: right" cellspacing="0" cellpadding="0" border="1"><caption style="border:solid 1px black"><strong> Hier den Tabellentitel einfügen</strong></caption><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr></table><p>Type the text here</p></div>

Konfiguration

In der Adminkonsole unter Administration > Grundeinstellungen > WYSIWYG > Einstellungen kann mit der Option Aktuellen Inhalt im WYSIWYG ersetzen das Verhalten der Option Aktuellen Inhalt ersetzen bei der Auswahl einer Vorlage im WYSIWYG-Editor definiert werden:

...

Konfiguration ¶

Editor Styling (CSS) ¶

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 Webdesign Templates. Zur Verwendung der automatischen Editor Styling Funktion muss in der Adminkonsole unter Administration > Grundeinstellungen > WYSIWYG > Einstellungen lediglich die Option Berücksichtigung von spezifischen CSS aktiviert werden:

Vorteil

Die Funktion ist einfach und schnell eingerichtet.

Nachteil

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 Webdesign Templates 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 Webdesign Template 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. 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 Webdesign Templates) 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-Datei 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 } }

Generic

Beispiel:

Vorteil

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.

Nachteil

Die Einrichtung ist zeitaufwändig und erfordert fortgeschrittene CSS Kenntnisse.

Funktionsumfang ¶

Der Funktionsumfang des WYSIWYG-Editors kann Rollen-basiert eingeschränkt werden. Unter Administration > Grundeinstellungen > WYSIWYG > Editorfunktionen kann der grundsätzlich verfügbare Funktionsumfang des WYSIWYG-Editors definiert werden:

Pro Benutzergruppe (in der Bearbeitungsmaske einer Benutzergruppe unter Administration > Benutzer und Rechte > Gruppen) kann der Funktionsumfang weiters eingeschränkt werden:

Plugins / Individualisierung ¶

Das Verhalten des WYSIWYG-Editors kann durch Plugins oder individuellen Erweiterungen mittels JavaScript nach belieben angepasst werden.

Die Konfiguration erfolgt über die Datei Wysiwyg.yml des jeweiligen Webdesign Templates (Ablage im Hauptverzeichnis des Webdesign Templates).

Im Abschnitt Config können direkt Einstellungen des CKEditors gesetzt werden. Beispiel:

Config:

-

config.bodyId = 'mystyle'

-

config.forcePasteAsPlainText = true;

-

config.enterMode = CKEDITOR.ENTER_P;

-

config.shiftEnterMode = CKEDITOR.ENTER_BR;

Generic

Im Abschnitt Code kann direkt JavaScript-Code eingefügt werden, welcher vor der Initialisierung des WYSIWYG-Editors ausgeführt werden kann. Beispiel:

Code:

-

CKEDITOR.on('instanceReady', myCustomFn);

-

CKEDITOR.on('dialogDefinition', myCustomDialogFn);

Generic

Komplettes Beispiel einer möglichen Wysiwyg.yml Datei:

Templates: - title: Bild und Titel image: /images/Wysiwyg/template1.gif description: Bild mit einem Titel und Text, der das Bild umfliesst. html: <h3><img src=" " alt="" style="margin-right: 10px" height="100" width="100" align="left" />Hier den Titel einfügen</h3><p>Hier den Text einfügen</p> - title: Zwei Spalten mit Titel image: /images/Wysiwyg/template2.gif description: Zwei Spalten, die beide einen Titel und Text beinhalten. html: <div class="row"><div class="col-md-6"><h2>Hier den Titel einfügen</h2>Hier den Text einfügen <br/> </div><div class="col-md-6"><h2 >Title</h2>Hier den Text einfügen <br/></div></div>Text goes here - title: Text und Tabelle image: /images/Wysiwyg/template3.gif description: Ein Titel mit Text und einer Tabelle. html: <div style="width: 80%"><h3>Hier den Titel einfügen</h3><table style="width:150px;float: right" cellspacing="0" cellpadding="0" border="1"><caption style="border:solid 1px black"><strong> Hier den Tabellentitel einfügen</strong></caption><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td></tr></table><p>Type the text here</p></div>Config: - config.bodyId = 'mystyle' - config.forcePasteAsPlainText = true; - config.enterMode = CKEDITOR.ENTER_P; - config.shiftEnterMode = CKEDITOR.ENTER_BR;Code: - CKEDITOR.on('instanceReady', myCustomFn); - CKEDITOR.on('dialogDefinition', myCustomDialogFn);

HTML