WYSIWYG: Kompakter Editor (Balloon-Editor)
Ziel
Zusätzliche, kompakte Variante des CKEditor zur Verfügung stellen
Beschreibung
Die aktuelle Einbindung des CKEditors verlangt vergleichsweise viel Platz für die Toolbar. Es gibt Use-cases, bei denen nicht genug Platz zur Verfügung steht. Für diesen Zweck soll eine zusätzliche Variante des CKEditors zur Verfügung gestellt werden, die weniger Platz benötigt.
Maßnahmen
Überblick
Bisher markieren wir Texteingabefelder, die WYSIWYG erlauben sollen, mit der speziellen Klasse wysiwyg
. Wir fügen eine zusätzliche Konfigurationsoptions type=balloon
hinzu, die die Implementation des WYSIWYG-Editors austauscht.
Mit dem Balloon-Editor können wir unsere Inhalte mit Hilfe einer Ballon-Symbolleiste, die neben dem ausgewählten bearbeitbaren Dokumentenelement erscheint, direkt an der Zielposition bearbeiten.
Details
- Konfiguration eines neuen Editors in
resources/assets/javascripts/chunks/wysiwyg.js
- Berücksichtigung der neuen Konfigurationsoption
data-editor="type=balloon"wysiwyg-balloon"
inresources/assets/javascripts/lib/wysiwyg.js
- In Abhängigkeit der neuen Klasse wird dann die Textarea mit einer der beiden Implementationen gefüttert.
- Anpassung der Vue-Komponente; über die Property
editorType="balloon|classic"
wird die Implementation angesprochen.
Kurzbezeichnung des Integrationsaufwandes
-
gering
eigenständiges Modul, das über Konfigurationsschalter komplett ein-/ausschaltbar ist oder Änderungen an einzelnen Dateien, die keine Änderungen an Datenbank oder systemweit genutzten Datenstrukturen erfordern
Durchführung
Das Feature wird durch den ELAN e.V. implementiert und von der UOL getestet.