Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

WYSIHTML5: Rich-Text-Editor mit HTML5-Markup

WYSIHTML5 ist ein schlanker Rich-Text-Editor, der als Open-Source erhältlich ist und sauberes HTML5-Markup erzeugt. Wir stellen euch den kleinen JavaScript-Editor, der in Google Chrome sogar Spracheingabe versteht, kurz vor.

WYSIHTML5 Rich-Text-Editor

WYSIHTML5 transformiert Textfeld in Editor

Der WYSIHTML5 Rich-Text-Editor wurde von der XING AG ins Leben gerufen. Neben XING setzt z.B. auch Basecamp den einfachen JavaScript-Editor ein, der über valides HTML5-Markup Codechaos und Inline-Styles vermeidet. Auf den Einsatz von JavaScript-Zusatzbibliotheken wie jQuery oder Prototype wurde bei der Entwicklung ebenfalls bewusst verzichtet. WYSIHTML5 ist laut den Entwicklern schneller und schlanker als seine RTE-Kollegen wie z.B. TinyMCE oder Aloha.  Da WYSIHTML5 ein <textarea> Tag in einen Rich-Text-Editor verwandelt, ist somit eine schlichte Fallback-Lösung für ältere Browser wie den Internet Explorer vor Version 8 gegeben, die mit den WYSIHTML5-Funktionalitäten nichts anfangen können.

WYSIHTML5 Features

WYSIHTML5 generiert auch aus unübersichtlichem Quellcode, der z.B. aus MS Word eingefügt wurde, valides, semantisches HTML5-Markup und lässt beim Markieren von Links automatisch ein Eingabefeld für die URL oberhalb des Textfeldes erscheinen. An Stelle von Inline-Styles werden Klassennamen verwendet, und Zeilenumbrüche werden für alle Browser vereinheitlicht.

WYSIHTML5: Automatische Linkerkennung

In Google Chrome kann Text über ein Mikrofon-Icon sogar als Spracheingabe in den Editor eingefügt werden. Wie immer bei Spracheingabe, muß man deutlich sprechen und das ein oder andere Wort kommt nicht ganz wie gewünscht in WYSIHTML5 an. Aber Spaß macht das Sprach-Feature und Texte müssen so lediglich noch etwas korrigiert werden, anstatt sie komplett von Hand zu schreiben.

WYSIHTML5: Spracheingabe in Google Chrome

WYSIHTML5 auf der eigenen Website einbinden

Das Einbinden von WYSIHTML5 in die eigene Website erfolgt über zwei JavaScripts, von denen das eine für die Parser-Regeln zuständig ist und das andere die eigentlich WYSIHTML5-Bibliothek enthält:

WYSIHTML5: Einbindung über zwei JavaScripts

Man kann bestehende Parser-Regeln verwenden oder sich seine eigenen definieren. Nun wird ein <textarea> Tag benötigt, dass von einem <form> Tag umschlossen ist und eine id erhält, um es später über JavaScript ansprechen zu können:

WYSIHTML5: Textfeld wird in Rich-Text-Editor gewandelt

Auch die WYSIHTML5-Toolbar ist komplett anpassbar. Dabei kann man auf eine große Auswahl an vordefinierten Formatierungsbefehlen zurückgreifen. Eine Liste aller verfügbaren Formatierungsoptionen und ein Beispiel für eine erweiterte WYSIHTML5-Konfiguration erleichtern den Einstieg.

WYSIHTML5: Über HTML anpassbare Toolbar

Nach dem Einbinden der WYSIHTML5-Skripte und dem Erstellen eines Textfeldes muss der Editor noch initialisiert werden und steht dann auf der eigenen Website bereit:

WYSIHTML5: Initialisierung des Rich-Text-Editors

WYSIHTML5 funktioniert in allen aktuellen großen Browsern:

WYSIHTML5: Browserunterstützung

Weitere Einzelheiten zu ersten Schritten und der Konfiguration von WYSIHTML5 findet ihr auf der Projektseite bei GitHub.

Weiterführende Links:

Bildnachweis für die Newsübersicht: aka digitalnative / flickr.com, Lizenz: CC-BY

Bitte beachte unsere Community-Richtlinien

3 Reaktionen
Klaus-M.

Klein und schlank schaut er aus .. auf den ersten Blick und wenn man nur eine Textarea ersetzen will, dann sicher eine gute Sache.

Man sollte aber auch immer Apfel mit Apfel vergleichen und das richtige Tool für den richtigen Einsatz finden.

Soweit ich das gesehen habe, verfolgt der Editor die alte "dead-end" Technologie und injiziert einen iFrame, der nicht mit dem Kontext der Seite "zusammenarbeitet", d.h. die Styles von der umgebenden Seite wird nicht berücksichtigt und das gibt kein echtes WYSIWYG.

Ich oute mit auch gleich als sehr Aloha Editor nahe, dann brauchen wir das nicht zu diskutieren :).

Aloha Editor verfolgt einen Ansatz, der das DOM in gängigen Browsern editierbar macht - Display and Edit anywhere. Wer mit Browsern schon entwickelt hat, weiß, welche Aufgabe hier vor einem steht.

Bevor jemand einen Editor in seine Software integriert, sollte sie/er genau prüfen, für welchen Einsatz sie/er diesen braucht, dann gibt's weniger Enttäuschung nachher.

Aber es ist gut, wenn sich mehr Entwickler mit dem Thema WYIWYG editing beschäftigen, schliesslich werden wir langfristig alles im Browser editieren :).

lg kms

Antworten
Syntafin

Leichter als TinyMCE hört sich direkt Klasse an :) werde wohl selbst auch darauf umstellen :).

Antworten
Martin Brüggemann

Sehr cool und deutlich schlanker/stabiler als der auf dem Content-Editable-basierende Aloha-Editor.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.