...
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