WYSIHTML5 – der schnellere WYSIWYG Editor

Was zur Zeit an WYSIWYG-Editoren für das Web unterwegs ist, ist der totale Overkill. Meistens wird ja TinyMCE oder der FCKEditor genommen, die beide nicht unbedingt durch ihren kleinen Skripte und ihre Durchschaubarkeit von sich reden machen. Ich zähle inzwischen beide zu den Monstern aus der grauen Vorzeit, die man nicht wirklich noch verwenden sollte. Beide Editoren machen eine ganze Menge Zeug das man nicht braucht, und es dauert elend lange bis sie überhaupt geladen sind.

Screenshot von WYSIHTML5

Auch in meiner Twitter Timeline werden inzwischen die Rufe nach Alternativen lauter, und ich hab ja auch schon das eine oder andere Skript vorgestellt. Angenehm aus der Menge sticht allerdings der WYSIHTML5 heraus, denn er ist rattenschnell, wie man dieser Demo entnehmen kann. Er wurde erstellt von Xing (Jehova!) und wird auch von Basecamp und Qype verwendet. Das er so schnell geladen wird liegt prinzipiell daran, das er in einer einzigen Datei daher kommt, und kein jQuery verwendet. In einer zweiten Datei werden sogenannte Parser Rules definiert, der Editor also mehr oder weniger definiert.

Wie üblich wird das Skript auf eine Textarea angewendet, und die Buttons über Attribute gesteuert, der Getting Started Guide gibt hier einen guten Eindruck. Man sollte sich den Editor auf jeden Fall einmal ansehen und eventuell sogar im nächsten Projekt einsetzen, denn etwas schnelleres habe ich bisher noch nicht gefunden.

 

Ähnliche Beiträge

HTML5Rocks – HTML5 und CSS3 von Google Mit HTML5Rocks beglückt uns Google mit einer Art eierlegenden Wollmilchsau für HTML5 & CSS3, der man eine Rosa-Google-Brille angezogen hat. Die Se...
HTML5 Canvas Cheat Sheet Kurz und schmerzlos: heute gib es ein Cheat Sheet für das HTML5 Canvas-Element, das als PDF oder als PNG heruntergeladen werden kann. Auch wenn es mir...
Interaktive Landkarte mit HTML5 Woran es derzeit bei HTML5 mangelt sind coole Seiten, die wirklich bis ins letzte alle Möglichkeiten ausreizen. Wenn es eine solche Seite gibt, ist di...
HTML5 File Upload in jQuery Eine der sinnvollsten Erweiterungen von HTML5 (und wahrscheinlich auch die am meisten benutzte) ist der neue Datei-Upload. In der Vergangenheit war es...

10 Antworten auf „WYSIHTML5 – der schnellere WYSIWYG Editor“

  1. Mit CKEditor und TinyMCE können Anwender viel, viel Unfug treiben, wenn man die Menüs in den Editoren nicht drastisch aufs Allernötigste reduziert. Aber dann kann man ja gleich einen schlankeren WYSIWYG-Editor einsetzen.

    Ich finde den WYMeditor ganz gut (http://www.wymeditor.org/), habe aber auch noch ein paar andere getestet. Leider lassen sich in so manchem CMS die Editoren nicht ohne erheblichen Aufwand oder zumindest ohne Lesen ellenlanger Anleitungen austauschen. Bisher fand ich da nur Drupal vorbildlich.

    Nun bin ich aber auf den hier vorgestellten Editor neugierig geworden. Lade ich gleich mal runter! Getestet wird dann irgendwann in der Freizeit, die es quasi nie gibt …
    :-(

  2. Hallo Vlad & Reinhard,

    es gibt mittlerweile bereits die option „useLineBreaks“ die auf false gesetzt werden kann.
    Man muss dazu lediglich den aktuellen master des GitHub Repositories kompilieren oder noch ein paar Tage warten bis ich Version 0.4 fertig hab. Danke für das Feedback :)

  3. Das aus TinyMCE was sinnvolles heraus kommt verdankt es prinzipiell der Tatsache, das es einen HTML Optimizer besitzt, der alles kaputt macht ;) Man muss sich an der Stelle schon irgendwo entscheiden zwischen Geschwindigkeit und Qualität, und wenn man mal ehrlich ist, reicht ein einfacher Editor für 90% der Anwendungsfälle. WordPress selbst hat ja ein Großteil der Funktionalität von TinyMCE weggeblendet, ist also dort auch totaler Overkill. Mir steht es an der Stelle ja frei das resultierende HTML noch einmal durch einen Beautifier oder durch Lint laufen zu lassen, wenn ich meine ich wills schöner haben, und es darf was länger dauern ;)

  4. @Reinhard,

    das p vs. doppel-br würde ich nicht auf die leichte Schulter nehmen. Speziell wenn die Website für die Absätze und Zeilenumbrüche unterschiedliche CSS-Angaben parat hat (Zeilenhöhe, Abstände, Schriftgröße etc.)

  5. Das ist mir auch aufgefallen und ist schon klar dass dies semantisch nicht so schön ist.

    Aber es macht die Texteingabe für unbedarfte Nutzer einfacher. Die nach meiner Erfahrung oft nicht zwischen Absätzen und Zeilenumbrüche unterscheiden können oder wollen.

  6. Hi Guido,

    ich habe mir mal den Code-Ausgabe bzw. das HTML des Editor angeschaut und das ist nicht das was ich mir unter guten Code vorstelle:

    <b>Test</b><br><br><h1>Noch mehr test</h1><br><ol><li>Und wo ist der Absatz?</li></ol>

    Alles in eine Zeile und doppel-br anstatt p … ich weiß nicht.

  7. Ich habe WYSIHTML5 bei meinem aktuellen Projekt eingesetzt und bin durchaus zufrieden damit. Gerade die reduzierte Funktionalität gefällt mir sehr gut.
    Nur auf den Einsatz von ausgerichtetem Text (rechtsbündig, …) habe ich einstweilen verzichtet, da dies auf Grund der fehlenden Absatzkontrolle nicht wirklich zufriedenstellend funktioniert hat.
    Aber super dass sich endlich was Neues aufgetan hat!

  8. Danke fürs Vorstellen, kommt wirklich angenehm schnell. Im HTML-Modus fällt das Lesen ein wenig schwer, weil der Quelltext ohne Umbrüche generiert wird – was natürlich andererseits für kompakte Seitengrößen sorgt. Jetzt würde ich mir den Editor nur noch als Plugin für WordPress wünschen! :)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.