WYSIHTML5 ist ein frischer Rich Text-Editor in der Tradition alter Bekannter wie TinyMCE. Er wird in eine Textarea implementiert und bietet Bearbeitungsfunktionen isoliert für die Inhalte dieses Elements. Das Prinzip ist nicht neu und seit Jahren gängig in den Blogs und CMS dieser Welt. Neu an WYSIHTML5 ist zweierlei. Zum einen schreibt es semantisches, valides HTML5, zum anderen lässt sich der zugrundeliegende Parser manuell anpassen.

WYSIHTML5: Javascript-Lösung für valide Auszeichnungen

Die als Open Source über GitHub verfügbare Javascript-Lösung WYSIHTML5 wirkt auf den ersten Blick wie der zwanzigste Klon bereits vorhandener Wettbewerber. Es handelt sich aber mitnichten um alten Wein in neuen Schläuchen, vielmehr bringt WYSIHTML5 tatsächlich sinnvolle Änderungen in eingefahrene Strukturen. Mit immerhin rund 150k ist der Editor weniger als halb so groß wie der TinyMCE. Zudem benötigt WYSIHTML5 kein jQuery oder sonstige Frameworks, sondern läuft als eigenständige Anwendung ohne jegliche Dependenzen.

Jedes iframe wird innerhalb einer Sandbox ausgeführt, weshalb die Entwickler den Editor als besonders Cross-Scripting-resistent annoncieren. Praktisch: URLs werden während des Eintippens automatisch verlinkt. Unter Chrome kann die Spracheingabe genutzt werden. Kollege Potschien schrieb kürzlich hier darüber. Wichtig für das konsistente semantische Markup der gesamten Site ist, dass WYSIHTML5 nicht mit Inline-Styles, sondern mit Klassen-Namen arbeitet.

WYSIHTML5: Anpassbarer Parser sorgt für beste Ergebnisse

Herzstück des Tools ist aber der separat einzubindende Parser. Dieser ist entwicklerseits bereits mit Regeln ausgestattet, die für eine valide HTML5-Auszeichnung sorgen. Das funktioniert sogar beim Einkopieren von sogenanntem HTML aus MS Word. Jederzeit kann man jedoch die Regeln manuell umschreiben. Immerhin gibt es bei manchen Auszeichnungen mehrere zulässige Varianten. Durch Anpassung des Parsers legt man seine persönliche Präferenz als Standard fest.

WYSIHTML5: Toolbar nach Maß

Ebenso anpassbar wie der Parser ist die Toolbar, die man innerhalb der Textarea anzeigen lässt. Innerhalb eines Div-Containers werden A-Elemente mit HTML5 Data-Attributen platziert, die wiederum von Funktionen des Javascript ausgelesen und verarbeitet werden. Sie erinnern sich, HTML5 Data-Attribute können beliebige Daten beinhalten ohne dass diese dem Endnutzer angezeigt würden. Sie sind also im Text der Seite, aber nicht in dessen Layout vorhanden.

Da jedes Werkzeug über ein eigenes A-Tag eingebunden wird, kann man natürlich frei über die bereit zu stellende Werkzeugvielfalt bestimmen und je nach Anwendungszweck mal mehr oder eben weniger Einzeltools verfügbar machen. Die Ansprache der einzelnen Teile des WYSIHTML5 erfolgt per Javascript über die ID des jeweiligen Elements. Das sieht bei der Textarea dann so aus:

<form><textarea id="wysihtml5-textarea" placeholder="Enter your text ..." autofocus></textarea></form>

Dass der Editor als Open Source unter GitHub zum kostenfreien Download bereit steht, erwähnte ich bereits. Unerwähnt blieb bislang, dass das Projekt eine erfreulich gute Dokumentation erfährt. Ebenfalls unerwähnt blieb der Initiator des Projektes. Es handelt sich dabei um unser aller XING, das soziale Netzwerk, das sich vor wenigen Jahren fast gegen Facebook durchzusetzen schien. WYSIHTML5 läuft unter Firefox ab Version 3.5, Chrome, dem Internet Exploder ab Version 8, Safari ab Version 4, Opera ab Version 11 und dem Safari unter iOS ab Version 5. In nicht unterstützten Browsern wird eine Standard-Textarea angezeigt.

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit fast 30 Jahren in der IT daheim. Seit 2008 schreibt er für Dr. Web, seit 2012 ist er Chefredakteur des Magazins. Man findet ihn auch auf Twitter und Facebook, aktiver ist er allerdings auf Google+.

• Web
|
• Twitter
|
• Facebook
|
• Google+
|
• More Posts (436)