Rich Text Editor

Rich Text Editor

 

Der Rich Text Editor ist ein erweiterer Text Editor, der dem Endbenutzer ermöglicht, nicht nur einfachen Text an ClassiX zu übermitteln, sonden (aufwendig) formatierten Text samt Bildern, Verlinkungen, Videos, ... etc. Man kann dieses Widget mit einem kleinen Textverarbeitungsprogramm vergleichen und es eignet sich in der Geschäftswelt am besten für die Erstellung von HTML-basierten Templates wie E-Mail-Signaturen, Dokumentenfragmente, usw.

Rich Text Editor

Die Kodierung und das Format des Textes

Der Text wird als HTML gespeichert und die Bilder werden mit einem Base64-Encoding in den Text eingebettet, falls sie nicht explizit als Verlinkungen eingebaut wurden. Der HTML-Text wird ohne Bereinigungen von Skript-Tags an ClassiX geschickt, jedoch auf dem Rückweg von ClassiX zu MorphIT von schädlichen und riskanten Skriptbestandteilen zwecks der Unterbindung von XSS-Attacken bereinigt. Beispiele für schädliche oder riskante Eingaben sind, um einige zu nennen, Skripttags, Event-Attribute wie onclick etc. Es wird ein Whitelist-Ansatz angewendet, um die maximale Sicherheit zu gewährleisten. Fehlerhafte Tags werden dabei automatisch korrigiert, wie zum Beispiel vergessene schließende Tags.

Einfache Benutzung

Man kann entweder den WYSIWYG-Editor benutzen oder in den Skriptmodus wechseln und direkt HTML-Text schreiben. Einfügen aus der Zwischenablage ist ebenfalls möglich. Die Toolbar enthält alle gängigen nötigen Funktionen, um einen Text zu formatieren. 

Isolierung des Editors

Der Rich Text Editor ist zwecks der Isolierung von Einflüssen fremder aus MorphIT kommender CSS-Style-Regeln in einem iframe-Element eingerahmt. Dieses iframe-Element ist für den Endbenutzer unerkennbar und barrierefrei in MorphIT integriert. Der einzige Unterschied spürt man nur beim Tabben in einigen Browsern, wo man zweimal statt einmal tabben muss, um in den Editor zu kommen oder aus dem Editor weiter zu tabben. Dieses Verhalten ist je nach Browser und Screen Reader unterschiedlich und von MorphIT nicht steuerbar. In Chrome findet dieser Effekt nicht statt.

Verwendung in MorphIT

Da ClassiX bislang keinen nativen Rich Text Editor hat, kann jedes Text oder MLText Widget in einen Rich Text Editor umgewandelt, indem man den MorphIT-Slot "description" auf den Wert "richtext" setzt. Das ist der einzige Schritt, den der InstantView-Entwickler beachten muss, ansonsten verhält sich der Rich Text Editor wie ein Text bzw. MLText Widget, mit Unterstützung für Events wie Select und Altered sowie den deaktivierten bzw. Nur-Lese-Zustand.