aus "Stud.IP-Entwicklerdokumentation"

Entwickler: Wysiwyg

Der Wysiwyg-Editor ersetzt HTML-Textfelder durch eine grafische Oberfläche, die gängigen Textverarbeitungssystemen ähnelt (z.B. LibreOffice).

Das Akronym WYSIWYG steht für What You See Is What You Get, zu Deutsch: Was du siehst, ist was du bekommst.


Um ein Textfeld zu ersetzen ist es lediglich notwendig diesem die CSS-Klasse add_toolbar hinzuzufügen. Desweiteren muss der Wysiwyg-Editor aktiviert sein, indem man den Stud.IP-Konfigurationsparameter WYSIWYG auf TRUE setzt.

ohne Wysiwygmit Wysiwyg
<textarea></textarea><textarea class="add_toolbar"></textarea>

Konfigurationsparameter WYSIWYG

Den WYSIWYG-Konfigurationsparameter findet man in Stud.IP unter: "Admin > Globale Einstellungen > Konfiguration > Suche: WYSIWYG". Dann wählt man aus der Zeile des WYSIWYG-Parameters das Icon für "Konfigurationsparameter bearbeiten" und setzt den Wert "Inhalt" auf TRUE.

DOM-Nodes durch JavaScript einfügen

Das Verstecken, nachträgliche Anzeigen und/oder nachträgliche Einfügen von DOM-Nodes per JavaScript löst in JavaScript kein Ereignis aus. Dadurch ist es unmöglich ein Event-Handling-basiertes Ersetzen solcher Elemente durchzuführen. Um das Problem zu umgehen installiert der Wysiwyg-Editor ein Timer-Event (setInterval) welches in regelmäßigen Abständen überprüft ob Nodes hinzugefügt wurden, oder sich ihre Sichtbarkeit (jQuery: $node.hide/.show) geändert hat. Dies kann zu einer verzögerten Darstellung des Wysiwyg-Editors führen, so dass für einen kurzen Augenblick (kürzer als eine Sekunde) die Textarea ohne Wysiwyg sichtbar ist. Um dies zu vermeiden kann die Funktion STUDIP.addWysiwyg(textarea) aufgerufen werden. Der textarea-Parameter kann dabei entweder der entsprechende DOM-Node oder das jQuery-Objekt des DOM-Nodes sein (es sind nur jQuery Objekte mit exakt einem DOM-Node zulässig).

Nach Möglichkeit sollte jedoch das nachträgliche Hinzufügen von Textfeldern per JavaScript dem verstecken und nachträglichen Anzeigen solcher Felder vorgezogen werden. Der Hintergrund hierfür ist, dass versteckte DOM-Nodes für manche ihrer Attribute andere Werte als im sichtbaren Zustand zurückliefern, wodurch es zu Fehlern im Wysiwyg-Editor kommt (Anzeige defekt, Eingabebereich nicht fokussierbar, ...). Der Wysiwyg-Editor versucht dieses Problem zu umgehen, in dem er sich von versteckten DOM-Nodes entfernt und erst wieder hinzufügt wenn diese (wieder) sichtbar gemacht werden. Dies ist jedoch leider nicht immer eindeutig feststellbar, da der Wysiwyg-Editor selber die Textarea verstecken muss und wie bereits erwähnt, das Anzeigen und Verstecken von DOM-Nodes keinen Event auslößt. Daher müssen die Parent-Elemente der Textarea zur Sichtbarkeitsfeststellung mit in Betracht gezogen werden, was eher einer Heuristik als einem deterministischem Verfahren entspricht.

Textarea-Inhalt durch JavaScript ändern

Ein weiteres Problem tritt auf, wenn der Wert einer Textarea nachträglich durch JavaScript geändert wird. Auch hier wird leider kein Event ausgelöst. Desweiteren enthält die Textarea nicht immer den aktuellsten Wert. Ist der Benutzer gerade am editieren, so sind aktuelle Änderungen nur im Wysiwyg-Editor enthalten, die Textarea enthält jedoch noch ihren ursprünglichen Wert. Generell sollten daher nachträgliche Änderungen des Textarea-Werts (durch JavaScript) vermieden werden. Im Augenblick versucht der Wysiwyg-Editor jedoch die Textarea möglichst aktuell zu halten und auch nachträgliche Änderungen an der Textarea zu übernehmen. Hierzu wird jedesmal wenn der Editor den Focus verliert (blur-Event) oder bekommt (focus-Event) die Textarea mit dem inhalt des Wysiwyg-Editors synchronisiert. Dieses Verfahren ist jedoch fehleranfällig (wenn z.B. die Textarea von außerhalb geändert wird, während der Benutzer noch am Editieren ist), und wird daher möglicherweise in zukünftigen Version wieder entfernt.

Erlaubtes HTML und CSS

Da viele HTML- und CSS-Eigenschaften für einen Stud.IP-Texteditor nicht benötigt werden und zudem zu Sicherheits- und Gestaltungsmängeln führen können, wurde nur ein kleiner Teil des aktuellen HTML-, beziehungsweise CSS-Standards erlaubt. Schriftarten sind derzeit über den HTMLPurifier auf serif, sans-serif, monospace und cursive eingeschränkt. Die erlaubten Tags, Attribute und Werte sind (mit einem Ausrufezeichen markierte Attribute müssen immer gesetzt sein):

URL: https://docs.studip.de/develop/Entwickler/Wysiwyg
Zuletzt geändert am 22.01.2015 19:31 Uhr