Die besten kostenlosen HTML WYSIWYG-Editoren für das Web

Ein WYSIWYG-Editor ist eine Library, die ein Textfeld in einen kleinen Word-Processor innerhalb der Seite verwandelt. Mehr als die Funktionen entscheiden über zwei Dinge: die Lizenz, da sich viele etablierte Libraries in den letzten Jahren geändert haben, und die Qualität des produzierten HTMLs.

Die Abkürzung steht für „what you see is what you get“: Wer schreibt, sieht den Text bereits formatiert statt der Tags und kann normalerweise in die Quelltextansicht wechseln, um ihn zu bearbeiten. Du findest sie in Admin-Panels, CMS und überall dort, wo jemand ohne HTML-Kenntnisse etwas veröffentlichen muss.

In Screenshots sehen sich alle sehr ähnlich; die Unterschiede werden erst sichtbar, wenn das Projekt wächst.

Wie man {#criteri}wählt #

Lizenz. Das ist der erste Filter. Einige Libraries haben ihre Lizenzen von permissive auf Copyleft oder kommerziell umgestellt: In einem geschlossenen Produkt können sie Verpflichtungen mit sich bringen, die du so nicht eingeplant hattest.
Gewicht. Ein vollständiger Editor kann mehrere hundert Kilobyte groß sein. In einem internen Dashboard spielt das keine Rolle, auf einer öffentlichen Seite hingegen schon.
Sauberkeit des HTMLs. Der wahre Test ist, wenn jemand einen Text aus Word einfügt: Seriöse Editoren entfernen die unnötige Formatierung, andere lassen sie durchgehen und füllen die Datenbank mit Styles voll.
Erweiterbarkeit. Bilder-Upload, Erwähnungen (Mentions), Tabellen, Templates: Prüfe, ob die Funktion, die du brauchst, enthalten ist oder ein kostenpflichtiges Modul darstellt.
Barrierefreiheit und Mobile. Das muss man in der Praxis testen: Einige Editoren werden auf kleinen Bildschirmen unbedienbar.

Die wichtigsten Optionen #

Editor	Lizenz	Stärke
CKEditor 5	GPL 2+ oder kommerziell	Der vollständigste, sehr durchdacht
TinyMCE	GPL 2+ oder kommerziell	Große Verbreitung und Dokumentation
Froala	Kommerziell	Sehr schönes Interface, schnell
Quill	BSD	Leichtgewichtig, ideal für moderne Apps
Tiptap	MIT (Pro-Module kostenpflichtig)	Basiert auf ProseMirror, sehr flexibel
Lexical	MIT	Von Meta, für React entwickelt
Editor.js	Apache 2.0	Erzeugt Blöcke in JSON, nicht HTML
Jodit	MIT (Pro-Version kostenpflichtig)	Keine externen Abhängigkeiten
Trix	MIT	Einfach, integriert mit Ruby on Rails
Summernote	MIT	Sofort einsatzbereit, basiert auf Bootstrap

CKEditor 5 #

Er ist der ausgereifteste in der Gruppe und seit über zwanzig Jahren am Start: Echtzeit-Kollaboration, fortgeschrittenes Bildmanagement, vollständige Tabellen, Formeln, Barrierefreiheits-Checks und ein Word-Import, der funktioniert. Dank der Plugin-Architektur kannst du nur das einbinden, was du wirklich brauchst.

Die Lizenz ist zweigeteilt: GPL 2 oder neuer für kompatible Open-Source-Projekte, oder eine kommerzielle Lizenz, die die Copyleft-Beschränkungen aufhebt und Premium-Funktionen freischaltet – wie Kollaboration, der Export nach Word und PDF sowie ein KI-Assistent.

Wenn dein Produkt proprietär ist, benötigst du die kommerzielle Lizenz. Ab Version 44 (Ende 2024) erfordert auch die Nutzung unter GPL die Angabe eines Lizenzschlüssels ('GPL') in der Konfiguration.

CKEditor 5 Schreibbereich mit Toolbar, einem eingefügten Bild und einer Zitat-Funktion — Die Toolbar setzt sich aus einzelnen Plugins zusammen und enthält nur das, was benötigt wird

TinyMCE #

Jahrelang war er der Goldstandard (er war die Engine des Classic Editors von WordPress) und bietet nach wie vor die meiste Dokumentation und fertige Integrationen. Wichtig zu wissen: Mit Version 7 im Jahr 2024 ist er von der MIT-Lizenz auf GPL 2 oder neuer gewechselt. Wenn du ihn in einem proprietären Produkt nutzt, basierend auf den alten Bedingungen, prüfe deine Situation und wechsle gegebenenfalls zur kommerziellen Lizenz.

Auch hier sind die meistgefragten Funktionen für Unternehmen kostenpflichtig, angefangen bei PowerPaste, das eingefügten Text aus Word und Excel bereinigt. Er bleibt eine solide Wahl, sofern man sich vorher mit der Lizenz auseinandersetzt und nicht erst danach.

TinyMCE Editor mit Menüleiste, Formatierungswerkzeugen und Wortzähler — TinyMCE: Klassische Menüs und viele Plugins, kostenlos und kostenpflichtig

Froala #

Er ist von Anfang an kommerziell und bietet keine kostenlose Version für den Produktivbetrieb, hat aber wahrscheinlich das angenehmste Interface in der Auswahl: Eine Toolbar, die sich dem Bildschirm anpasst, kontextbezogene Popups, elegante Tabellen und ein extrem schneller Start. Wenn das Budget da ist und die Schreib-Experience zählt, lohnt sich ein Test.

Quill #

Leichtgewichtig, mit einer sauberen Architektur und einem eigenen Dokumentenmodell (Delta) statt einfachem HTML. Nach einer Pause kam 2024 die Version 2.0 heraus; er wird viel in modernen Anwendungen genutzt, bei denen man einen vorhersagbaren Editor braucht, der sich leicht per Code steuern lässt.

Er bietet nicht den Funktionsumfang von CKEditor bei Tabellen und komplexen Inhalten, aber für Kommentare, Beschreibungen und Texte mittlerer Länge reicht er völlig aus.

Tiptap und Lexical #

Das sind die zwei neuen Namen, die viele Entwickler heute wählen. Tiptap baut auf ProseMirror auf, bietet eine hervorragende Integration für React, Vue und andere Frameworks und lässt dir volle Freiheit beim Design des Interfaces; Kollaboration und einige Module kosten extra. Lexical ist der von Meta entwickelte Editor – leichtgewichtig und primär für React optimiert. Beide erfordern mehr initialen Aufwand als ein „Ready-to-use“-Editor, da du die Toolbar selbst baust.

Editor.js #

Er funktioniert anders als die anderen: Anstatt HTML zu produzieren, liefert er eine Blockstruktur im JSON-Format zurück. Jeder Absatz, jedes Bild und jedes Zitat ist ein Block mit seinen eigenen Daten.

Das ist ein Vorteil, wenn Inhalte an verschiedenen Stellen wiederverwendet werden sollen (z. B. Website, App und Newsletter), da du die Darstellung selbst bestimmst, wenn du sie auslieferst. Ein Nachteil ist es hingegen, wenn du einfach nur HTML zum Speichern und Anzeigen benötigst.

Jodit, Trix und Summernote #

Jodit ist in TypeScript ohne Abhängigkeiten geschrieben und bietet ein gutes Verhältnis zwischen Dateigröße und Funktionen, einschließlich eines kleinen Editors zum Zuschneiden und Skalieren von Bildern. Es steht unter der MIT-Lizenz; es gibt eine kostenpflichtige Pro-Version für den erweiterten File Manager und weitere Funktionen.

Jodit-Editor mit Symbolleiste und Fenster zum Einfügen eines Links — Jodit: leichtgewichtig und ohne Abhängigkeiten

Trix stammt aus der Ruby on Rails-Welt, ist bewusst minimalistisch gehalten und erzeugt sehr sauberes Markup.

Summernote basiert auf jQuery und Bootstrap und lässt sich in wenigen Zeilen konfigurieren; der Air-Modus blendet die Symbolleiste aus und zeigt die Schaltflächen erst an, wenn du Text markierst. Es ist die schnelle Wahl für ein internes Dashboard, auch wenn die Updates langsamer erfolgen als bei CKEditor oder TinyMCE.

Modul mit Titel und Inhalt, verwaltet durch Summernote mit einer Symbolleiste im Bootstrap-Stil — Summernote: lässt sich in wenigen Zeilen in ein Bootstrap-Modul integrieren

Lizenzen haben sich geändert. Einige Bibliotheken aus dieser Kategorie sind von permissiven Lizenzen zu Copyleft- oder kommerziellen Lizenzen gewechselt. Wenn du ein Projekt aktualisierst, das vor Jahren gestartet wurde, prüfe unbedingt, welche Lizenz die Version abdeckt, die du installieren möchtest: Die alte Version unterliegt den ursprünglichen Bedingungen, die neue jedoch nicht.

Drei Dinge, die man erst spät bemerkt #

Eingehendes HTML muss auf dem Server gefiltert werden. Kein Editor ersetzt diesen Schritt: Jeder kann manuell geschriebene Inhalte an deine Website senden und dabei die Benutzeroberfläche umgehen. Du benötigst eine Sanitization-Library auf dem Server (zum Beispiel HTML Purifier in PHP oder DOMPurify mit Node), sonst erlaubst du es jemandem, Code im Browser anderer Besucher auszuführen.

Das Hochladen von Bildern ist meistens nicht enthalten. Der Editor stellt dir zwar die Schaltfläche bereit, aber den Teil, der die Datei empfängt (Validierung, Skalierung, Speichern), musst du selbst programmieren.

Das Einfügen aus Word ist der entscheidende Test. Bevor du dich entscheidest, füge ein echtes Dokument voller Styles in den Editor ein und schau dir das resultierende HTML an. Das ist der Test, der ausgereifte Bibliotheken von anderen unterscheidet.

Online-Tool zur HTML-Bereinigung mit dem visuellen Editor links und dem vollen Inline-Style-Code rechts — Rechts der Code, der nach dem Einfügen eines Word-Dokuments übrig bleibt: überall Inline-Styles

Die Wahl basierend auf dem Projekt #

Open-Source-Website oder -App: CKEditor 5 oder TinyMCE in der Copyleft-Version.
Geschlossenes kommerzielles Produkt: Quill, Tiptap, Lexical, Jodit, Trix oder Summernote mit permissiven Lizenzen; oder die kommerzielle Lizenz von CKEditor, TinyMCE oder Froala.
Schnell zu erstellendes internes Dashboard: Summernote oder Jodit.
Strukturierte Inhalte für die Wiederverwendung an anderer Stelle: Editor.js.
Echtzeit-Kollaboration wird benötigt: CKEditor mit kommerzieller Lizenz oder Tiptap mit seinen kostenpflichtigen Modulen.
Maßgeschneiderte React-Anwendung: Lexical oder Tiptap.

Häufig gestellte Fragen #

Welcher kostenlose WYSIWYG-Editor ist der beste? #

Für Funktionen von CKEditor 5, sofern die Copyleft-Lizenz mit deinem Projekt kompatibel ist. Wenn es sich um ein geschlossenes Produkt handelt und du keine Lizenz kaufen möchtest, ist Quill der beste Kompromiss aus Leichtigkeit, permissiver Lizenz und Ergebnisqualität; Tiptap, wenn du bereit bist, das Interface selbst zu bauen.

Sind diese Editoren sicher gegen XSS-Angriffe? #

Sie helfen, aber sie reichen nicht aus. Editoren filtern den Inhalt im Browser, und dieser Filter kann umgangen werden, indem Daten direkt an den Server gesendet werden. Die Bereinigung muss auf dem Server erfolgen, bevor gespeichert wird – und idealerweise auch schon vor der Anzeige.

Kann ich sie mit React, Vue oder Angular verwenden? #

Ja, die wichtigsten bieten offizielle Komponenten für die gängigsten Frameworks an. Prüfe jedoch, ob die Komponente aktuell ist bezüglich der Version des Frameworks, die du nutzt: Hier entstehen die meisten Inkompatibilitäten.

HTML oder JSON in der Datenbank speichern? #

HTML lässt sich sofort anzeigen, bindet den Inhalt aber an eine einzige Darstellung. Block-basiertes JSON, wie bei Editor.js, erfordert einen zusätzlichen Schritt für die Anzeige, macht die Inhalte aber über verschiedene Kanäle hinweg wiederverwendbar. Für einen Blog ist HTML völlig in Ordnung; für Inhalte, die für Websites, Apps und Newsletter bestimmt sind, lohnt sich das strukturierte Format.

Macht ein WYSIWYG-Editor die Seite sehr langsam? #

Das kommt auf die Konfiguration an. Bei modularen Bibliotheken bindest du nur die Plugins ein, die du wirklich brauchst, wodurch das Gewicht deutlich sinkt. Lade den Editor in jedem Fall nur auf den Seiten, auf denen er auch benötigt wird, und nicht auf der gesamten Website.

Welcher ist der beste WYSIWYG-Editor für WordPress? #

WordPress nutzt den Gutenberg-Block-Editor, der keine dieser Bibliotheken ist. Der alte Classic Editor, der immer noch als Plugin verfügbar ist, basiert auf TinyMCE. Die Bibliotheken in diesem Guide sind nützlich, wenn du dein eigenes CMS, ein Dashboard oder eine App entwickelst.

Ist das produzierte HTML gut für SEO? #

Wenn der Editor gut ist und die Autoren Überschriften als solche und nicht nur als vergrößerten Text verwenden, dann ja. Probleme entstehen durch kopierten Code aus Word und <span>Dokumente voller Styles: Halte den Output sauber und beschränke in der Symbolleiste nach Möglichkeit Optionen, die zu unnötigem Markup führen, wie benutzerdefinierte Schriftarten oder Größen.