Bester WYSIWYG Editor für Web-Inhalte

UPDATED: Juni 2017

Es gibt verschiedene out of the Wysiwyg-Editoren für das web. Prominente exponenten für web-html-wysiwyg’s sind der CKEditor oder der TinyMCE. Bezahlte, aber dennoch erweiterbare, Wysiwyg’s sind zum Beispiel Froala und Redactor. Welches ist der richtige für Wysiwyg für dich?

TL;DR: Wenn du eine kommerzielle Applikation hast, dann wähle den Froala Editor. Falls nicht, so ist der TinyMCE eine gute Wahl.

 

Folgend ist eine vollständige Übersicht über die bekanntesten und besten Wysiwyg-Editoren.

CKEditor

Der CKEditor ist der am meist verbreitete Wysiwyg-Editor bis heute. Google Trends bestätigt dies verglichen mit seinem grösstem Konkurrenten, dem TinyMCE. Was aber schwierig zu verstehen ist, ist wie der CKEditor diesen Status erreicht hat. Er ist schnell installiert, das muss man ihm zugestehen. Aber die Entwickler scheinen nicht die geringste Ahnung zu haben von Design oder Usability. Hier ist ein Screenshot vom CKEditor:

CK Editor Screenshot

Er sieht sehr schwer und altmodisch aus. Aber die Probleme beginnen erst, wenn man sich die komplexeren Funktionalitäten anschaut. Wie das Einfügen einer Tabelle:

CK Editor Table Insertion

Dieses Interface spricht für sich selbst.

Die nächste böse Überraschung folgt, sobald eine Tabelle eingefügt wurde:

CKEditor Tables

Ja, ich weiss das ist wie Browser Tabellen historisch angezeigt haben, aber könnte der Editor hier nicht ein bisschen helfen? Alle anderen Editoren zeigen Tabellen standardmässig nicht so hässlich an.

Weiter geht’s mit einem Bild:

CKEditor Image Insertion

Schon wieder sind wir konfrontiert mit einem “wunderhübschen Dialog”. Ich möchte jetzt nicht noch mehr Platz verschwenden, also poste ich keine CKEditor Popups mehr. Also was sind die guten Eigenschaften des CKEditors? Naja, es gibt viele Plugins, er ist konfigurierbar und hat eine breite Nutzerbasis, was dabei hilft Antworten auf Fragen im Netz zu finden.

Ein weiteres “Feature” beim CKEditor ist, dass er Inputs aggressiver konvertiert als andere Editoren. Zum Beispiel ein Apostroph (‘) wir in Ruhe gelassen von den meisten Editoren, der CKEditor hingegen konvertiert ihn zu '. Ob das gut oder schlecht ist hängt davon ab, was du willst. Übrigens, wusstest du, dass der CKEditor früher FCKEditor hiess, benannt nach seinem Author Frederico Caldeira Knabben, aber das Team dann bemerkt hat, dass fck ein bisschen zu nahe an f*ck ist? The more you know…

TinyMCE

Fort von den Problemen mit dem CKEditor und auf zu einem neuen Abenteuer mit dem TinyMCE. Der Name bedeutet er war “Tiny Many Centuries Earlier”. Was nicht so schlimm ist, Computer werden schneller, aber manche Leute in der Community mögen das nicht allzu sehr.

Auf den ersten Blick sieht der TinyMCE besser aus als der CKEditor:

TinyMCE Screenshot

Ich verstehe die meisten seiner Elemente, da nur die wichtigsten Elemente “itemized” sind und die anderen mit Text-Labels versehen sind. Falls du über diese Thematik noch nicht viel nachgedacht hast, hier ist beschrieben, warum das eine gute Idee ist. Als nächstes möchten wir eine Tabelle einfügen:

TinyMCE Table Insertion

Was ich dabei mag, ist die Grid-Auswahl der Tabellengrösse. Was ich nicht mag, ist dass es eine Option anzeigt die anklickbar ist und 5 Optionen die nicht anklickbar sind:

TinyMCE useless buttons

Warum zeigt es das alles an? Aber das ist ein Detail. Nachdem eine Tabelle eingefügt ist sieht sie schön aus und ich kann sie editieren:

TinyMCE table editing

Alles in allem ist die TinyMCE-Tabellen-Benutzererfahrung ganz ok. Als nächstes laden wir ein Bild hoch. Oh ja stimmt, das geht ja gar nicht. Ich kann nur einen eine URL verlinken wo mein Bild ist. Das ist echt praktisch, weil ich ja immer erst meine Bilder auf einem anderen Server hochladen möchte, bevor ich sie auf der eigentlich Plattform verwende. Grossartig.

TinyMCE image insertion

Es ist klar, dass ein Editor ein Bild nicht ganz von selbst auf den Server laden kann. Aber er könnte mindestens ein Interface dazu anbieten und erklären wie es funktioniert. Es gibt einen Workaround, zum Beispiel kann man einen “Add Media”-Button hinzufügen ausserhalb des Editors. WordPress macht das zum Beispiel so:

Wordpress Add Media Button

WordPress braucht den TinyMCE mit einem externen “Add Media”-Button. “Wenn der TinyMCE gut genug ist für WordPress, dann ist er doch sicherlich auch gut genug für mich?”, denkst du dir jetzt vielleicht. Beachte dabei aber, dass es WordPress schon sehr lange gibt, genauso wie der TinyMCE und es daher eine “Legacy-Choice”, also eine historisch bedingte Wahl sein könnte. Ausserdem muss WordPress eine OpenSource Option wählen, damit sie den Editor auch mit WordPress verteilen können. Die nächste Option ist eine bezahlte.

Froala

Ahh ist das nicht eine Erleichterung? Sieht echt schön aus! Bis du bemerkst, dass es nicht gratis ist:

Hm, kannst du es trotzdem noch “customizen”? Ja, das funktioniert. Du kannst plugins schreiben https://www.froala.com/wysiwyg-editor/docs/concepts/create-plugin für diesen Editor gleich wie für TinyMCE und den CKEditor. Der einzige Unterschied ist, dass es dich zwischen $99 und $799 ärmer macht, dafür aber besser aussieht. Schauen wir uns mal das Tabellen-Feature an, und ob dieses besser implementiert ist als beim CKEditor oder TinyMCE.  Tabellen sind sowieso das einzig schwierige für Wysiwyg-Editoren. Dinge fett oder kursiv darzustellen, so einen Wysiwyg könnte ich auch noch selbst schreiben… Okay, Tabellen:

Froala Table Insertion

Das ist alles was ich benötige um etwas einzufügen! Danke! Änderungen an Tabellen:

Screen Shot 2016-05-12 at 01.42.58

Da kommt mir nur eins in den Sinn: Sehr durchdacht und schön. Linien sind änderbar und man kann sie stylen und sogar einzelne Zellen sind einfärbbar.

Froala Tables

Wie sieht es aus mit Bildern?

Froala Image Insertion

JA, das ist was ich brauche! Erste Priorität: HOCHLADEN. Wenn du es wirklich möchtest, okay, dann klicke eben auf das “Bild verlinken”. Wie sieht es aus, wenn ein Bild einmal eingefügt ist?

Froala Image Editing Part 1Froala Image Editing

Wow, ich kann die Grösse verändern und mehr!  Das ist doch einfach grossartig.

Ich möchte damit abschliessen, dass ich nicht mit Froala in Verbindung stehe, auch wenn ich so begeistert davon schreibe. Nur die Frustration über CK und TinyMCE haben mich dazu gebracht, ein Produkt dass mich 800$ ärmer macht so zu loben.

Update

Ich habe diese Review ursprünglich über Froala Editor v1 geschrieben. Jetzt gibt es den v2, und er ist sogar noch besser. Wir brauchen den Froala Editor in unserem eigenen Produkt, inklusive eigenen Plugins. Die API ist sehr intuitiv und es war eine Freude damit zu arbeiten. Mit nur 300 Zeilen Code war es möglich ein Mathe Plugin, ein Lückentext Plugin und ein abc-Listen-Plugin zu schreiben. Alle Optionen vom Editor sind gut dokumentiert und nützlich. Sie haben eine gute Balance zwischen mächtigen Features und einem schlanken Editor gefunden (Code und auch Layout). Wenn du den Editor kaufst, dann kannst du den ganzen Source Code herunterladen. Ich würde aber nicht empfehlen den “Core zu hacken” (google nach “hacking core” falls dir das nichts sagt). Dafür sind die Plugins da. So bleibst du immer kompatibel mit Updates.

Redactor

Neben Froala gibt es einen anderen bezahlten Wysiwyg-Editor. Er heisst Redactor. Redactor hat weniger Funktionalitäten als Froala. Sie erlauben nur Bilder mit voller Breite und auch nur Tabellen mit voller Breite. Tabellen können auch nicht ineinander gefügt oder angepasst werden.

Redactor Screenshot

Ich denke aber, dass selbst wenn du einen minimalistischen Editor brauchst, Froala die bessere Wahl ist. Du kannst einfach Funktionalität vom Froala entfernen (zum Beispiel keinen File-Upload Button anzeigen), aber wenn du die Funktionalität dann doch brauchst, ist es einfach sie einzufügen. Dann bist du froh, dass du etwas nicht selbst programmieren musst!

QuillJS

Screenshot of the QuillJS editor

QuillJS ist eine gute Option, falls du einen Editor brauchst, der ohne JQuery funktioniert, zum Beispiel wenn du die ShadowDOM benutzt. QuillJS ist ein Open-Source Projekt mit über 13’000 Github Stars welches du unter https://github.com/quilljs/quill findest.

Unglücklicherweise gibt es keine komplexen Features, wie zum Beispiel Tabellen.

 

ContentToolsJS

Während ContentToolsJS einen starken Fokus auf Schönheit hat, wirft es vieles der klassischen Editor-Eigenschaften über Bord. Der Editor hängt einfach in der Luft, was ein Problem sein könnte bei Mobilen Geräten. Ich konnte auch nichts finden bezüglich “customizability”, darum nehme ich nicht an, dass man dafür ein Plugin schreiben könnte. Zu guter Letzt schauen wir noch unser Lieblingsmerkmal, die Tabellen, an.

ContentToolsJS Screenshot

Es ist nicht editierbar und alle Zellen sind äquidistant (im Beispiel ⅓, ⅓,⅓ ). Darum, wenn du viel Text in Kolonne 1 hast und wenig in Kolonne 3, dann hast du ein Problem.

SimpleMDE

Während alle anderen Editoren die wir bis jetzt angeschaut haben HTML Editoren waren, schauen wir uns doch mal einen Markdown-Editor an zur Abwechslung. Es ist einfacher einen Markdown-Editor zu schreiben weil es nur ein Subset von den HTML-Funktionalitäten ist, aber andererseits hat man somit auch schwerwiegende Restriktionen. SimpleMDE hat einen guten Job gemacht mit fett und kursiv, Überschriften und so weiter. Wie alle Wysiwyg-Editoren. Es gibt keine Tabellen, obwohl die von Markdown unterstützt wären. Shame on you, SimpleMDE! Trotzdem ist es der beste Markdown-Almost-Wysiwyg den es gibt.

SimpleMDE Screenshot

Andere Editoren

Ich habe auch eine Reihe anderer Editoren probiert, wie zum Beispiel Trubowyg oder Summernote. Ich belasse es dabei, dass mich diese nicht überzeugt haben. Wähle Froala, anstatt noch mehr über schlechte Editoren zu lesen…

Bonus: Du kannst dir auch anschauen, was Wikipedia für einen Wysiwyg hat! Klicke einfach auf “editieren” in Wikipedia. Für deutsche Seiten gibt es einen ziemlich ausgereiften Editor:

Wikipedia Editor Screenshot

Zusammenfassung

Ich hätte nicht gedacht, dass es so verdammt hart ist einen guten Wysiwyg-Editor im 2016 zu finden. Aber anscheinend ist es so. Falls du eine OpenSource Lösung brauchst, dann ist TinyMCE die beste Option. Wenn du ein wenig Geld zur Verfügung hast, dann ist Froala sicherlich eine gute Wahl. Wenn du mir nicht glaubst, hier ist eine ähnliche Review.

Leave a Reply

Your email address will not be published.