WYSIHTML5 – der schnellere WYSIWYG Editor

Screenshot von WYSIHTML5

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


Modernizr – HTML5 und CSS3 mit Fallback
Manchmal ist der Teufel ein Eichhörnchen, und scheinbar hat er sich an einem langen Winterabend überlegt, der beste Weg die Menschheit zu quälen wären...


Heatmap mit dem HTML5 Canvas Element
Heatmaps sind sinnvolle kleine Helferlein bei der Analyse einer Webpage. Ich habe schon darüber berichtet wie man mit der Open Source Clickheat eine f...


Font Dragr – Fonts für den Einsatz im Web einfach ...
Der Font Dragr ist eine ziemlich coole Sache, man kann einen beliebigen Font einfach auf eine dafür vorgesehene Fläche mittels Drag&Drop ziehen, u...


DropArea – Bildupload mit HTML5 und jQuery
Das Input-Feld vom Typ File ist ein ausgesprochener Störenfried! Keine Präsentation einer fertigen Website ohne Diskussion darüber, wieso der "Durchsu...

Kommentare

  1. Torsten

    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. Christopher Blum

    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. Autor
    des Beitrages
    Guido

    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. Vlad

    @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. Reinhard Söllradl

    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. Vlad

    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. Reinhard Söllradl

    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. Caspar Hübinger

    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.