Website-Baukasten

Mit den 7 besten WYSIWYG-Editor-Tools habt Ihr bei der Website-Gestaltung alles im Blick

Wir erklären Euch, was es mit dem WYSIWYG-Prinzip auf sich hat und wie Ihr auch ohne Programmier-Kenntnisse eine schöne Website erstellt.

Fast alle Unternehmen haben eine Website. Die Erstellung von Web-Inhalten verläuft meistens über einen Quellcode. Dieser wird über eine Programmier-Sprache eingegeben. Aber nicht alle Unternehmer*innen beherrschen HTML, JavaScript, Python, PHP und Co. Wie also kommen Programmier-Anfänger*innen zu einer Unternehmens-Website? Die Antwort darauf lautet: What-you-see-is-what-you-get. Wir erklären Euch, was es mit dieser Phrase auf sich hat und wie Ihr auch ohne Programmier-Kenntnisse eine schöne Website erstellt.

Was ist WYSIWYG?

WYSIWYG steht für die englische Phrase „What-you-see-is-what-you-get“, welche die Idee hinter WYSIWYG-Softwares schon sehr detailliert beschreibt – was Ihr seht, ist was Ihr bekommt. Dabei handelt es sich um eine Live-Darstellung. Anstatt also einen – für viele Unternehmer*innen – abstrakten Code einzugeben, der dann übersetzt Eure Website ergibt, arbeitet Ihr mit unterschiedlichen Bausteinen. Das Website-Ergebnis sieht dann exakt so aus, wie Ihr es auch während der Bearbeitung seht.

Der Unterschied zwischen WYSIWYG und der Verwendung einer Programmier-Sprache wird anhand des folgenden Beispiels deutlich: 

So sieht der Unterschied zwischen WYSIWYG (links) und Code aus.

Das Programm rechts arbeitet mit einer Programmier-Sprache. Sämtliche Formatierungen und Text-Eigenschaften werden mittels Quellcode festgehalten. Die Nutzer*innen sehen während dieses Prozesses nicht, wie das Endergebnis aussehen wird. 

Im Vergleich dazu arbeitet das Programm links mit WYSIWYG. Die Schriftart und -größe sowie das Layout des Textes können einfach per Klick im Menü ausgewählt und geändert werden. Die Nutzer*innen sehen während des gesamten Bearbeitungs-Prozesses bereits das fertige Ergebnis.

Welche sind die 7 besten WYSIWYG-Editors? 

Unsere Nutzer*innen haben WYSIWYG-Editor-Tools für Euch auf die Probe gestellt, bewertet und die besten herausgefiltert. Auf OMR Reviews findet Ihr die beliebtesten WYSIWYG-Editors im Vergleich. Folgende WYSIWYG-Tools haben bei den User*innen am besten abgeschnitten: 

1. Froala als WYSIWYG-Editor-Tool

So sieht das Interface vom WYSIWYG-Editor Froala aus

Der in JavaScript geschriebene Froala-WYSIWYG-Editor ist einer der visuell beeindruckendsten Rich-Text-Editors in der Branche. Die WYSIWYG-Software ist bekannt für ihr sauberes und schnelles UI-Design. Der WYSIWYG-Editor besticht durch gemeinsame Bearbeitung in Echtzeit. Das WYSIWYG-Tool ist in Kombination mit unterschiedlichen Framework-Plugins erhältlich und bietet außerdem eine detaillierte Anleitung für alle Programmierer-Newbies. Programmier-Kenntnisse oder Erfahrungen in diesem Bereich sind für die Verwendung der Software also nicht erforderlich. Zusätzlich zeichnet sich der Froala-WYSIWYG-Editor durch seine Geschwindigkeit aus. Der Rich-Text-Editor lässt sich beispielsweise in weniger als 40 Millisekunden initialisieren.

Froala-Funktionen

  • Kollaborative Online-Bearbeitung in Echtzeit
  • Individuelle Anpassung des Rich-Text-Editors
  • Nahtlose Server-Integration
  • Mehr als 100 intuitive Funktionen
  • Leistungsstarke Framework-Plugins
  • Erhältlich in unterschiedlichen Sprachen

Froala-Preise

Froala Free

Die kostenlose Version des Froala-WYSIWYG-Editors ist ideal für alle, die sich unverbindlich überzeugen lassen wollen. Sie umfasst eine unlimitierte Anzahl an monatlichen Nutzer*innen sowie eine Self-Host-Option. Die kostenlose WYSIWYG-Software kann sowohl für eine Domain als auch ein Produkt verwendet werden. 

Froala kostenpflichtig nutzen

Die kostenpflichtigen Optionen des Froala-WYSIWYG-Editors bieten Euch je nach Paket unterschiedliche Möglichkeiten. Die Basic-Version gibt es ab 199 $/Jahr und ist perfekt für Einzelpersonen oder Kleinunternehmer*innen. Sie beinhaltet ebenfalls eine unlimitierte Anzahl an monatlichen Nutzer*innen sowie die Verwendung für drei Produkte und eine Domain. Die Basic-Version wird obendrein mit einem Software-Schlüssel zur individuellen Aktivierung geliefert und umfasst auch die Self-Host-Option. Das Sahnehäubchen ist die Wasserzeichen-freie Verwendung des WYSIWYG-Tools.

Die Professional-Variante ist mit 899 $/Jahr etwas kostspieliger und ist vor allem für die geschäftliche Verwendung, CMS und SaaS-Anwendungen geeignet. Sie verfügt über alle Features der Basic-Version. Zusätzlich ist sowohl die Anzahl an monatlichen Nutzer*innen als auch an bearbeitbaren Domains unlimitiert. Zudem kann der WYSIWYG-Editor auch für interne und mobile Apps verwendet werden. Bei Problemen könnt Ihr jederzeit den Kunden-Support kontaktieren.

Die Froala-Enterprise-Version ist besonders für größere Unternehmen attraktiv und ab 1.199 $/Jahr zu haben. Sie verfügt über alle Features der Professional-Version sowie der Möglichkeit, den Editor auch bei Website-externen Produkten zu verwenden. Außerdem ist die Anzahl an bearbeitbaren internen Produkten unlimitiert.

Neugegründete Unternehmen erhalten bei Erwerb der Professional- oder Enterprise-Variante von Froala einen Rabatt von 35 %, wenn sie weniger als 50 monatliche Nutzer*innen haben. 

Froala-Alternativen

Auf OMR Reviews findet Ihr eine Übersicht aller Froala-Alternativen. So könnt Ihr basierend auf den verifizierten Bewertungen und Erfahrungs-Berichten unserer Nutzer*innen das passende WYSIWYG-Editor-Tool für Euch und Euer Unternehmen auswählen.

2. HubSpot CMS Hub als WYSIWYG-Editor-Software

Das HubSpot CMS bietet Euch eine Komplettlösung. Das WYSIWYG-Tool hält SEO-Empfehlungen, adaptive Tests, Code-Warnung, ein voll integriertes CRM und eine große Auswahl an Website-Designs sowie einen Drag-and-drop-Editor für Euch bereit. HubSpot CMS Hub ist vor allem für schnell wachsende Unternehmen geeignet, die Unterstützung im Content-Management benötigen. 

HubSpot CMS Hub-Funktionen

  • Content-Erstellung
  • Rich-Text-Editor
  • Content-Management
  • Drag-and-drop-Editor
  • SEO-Empfehlungen
  • Dashboards und Reports
  • Website-Themen
  • Integriertes CRM
  • SSL-Zertifikat
  • Code-Alerts

HubSpot CMS Hub-Preise

HubSpot CMS Hub Free

Die kostenlose Testversion von HubSpot CMS Hub kann 14 Tage lang genutzt werden. Sie umfasst den Drag-and-drop-Editor, grundlegende SEO-Empfehlungen, Cloud-Hosting, eine CRM-Datenbank sowie Website-Traffic-Analytics. Außerdem kann eine Custom-Domain mit dem WYSIWYG-Tool verbunden werden. Die kostenfreie Version ist sowohl für Websites als auch für Blogs geeignet.

HubSpot CMS Hub kostenpflichtig nutzen

Die HubSpot CMS Hub-Preise für die kostenpflichtigen Versionen unterscheiden sich je nach Feature-Umfang. Die Starter-Variante gibt es für 23 $/Monat. Sie beinhaltet alle Features der kostenlosen Testversion sowie eine mehrsprachige Inhalts-Erstellung, 24/7-Sicherheits-Überwachung inklusive Bedrohungs-Erkennung, ein Standard-SSL-Zertifikat und einen Live-Chat- sowie E-Mail-Support.

Die Professional-Version kostet 360 $/Monat und umfasst alle Starter-Features. Ebenso verfügt diese Version über Personalisierungs-Möglichkeiten dank Smart-Content, erweiterten SEO-Empfehlungen, A/B-Testing und Reporting sowie einer benutzerdefinierten Bericht-Erstellung.

Wer das Komplett-Paket möchte, greift zur Enterprise-Variante für 1.200 $/Monat. Sie bietet Euch neben allen Professional-Funktionen zusätzliche Root-Domains, adaptive Tests, Partionierungen, Mitgliedschaften und Web-Anwendungen.

HubSpot CMS Hub-Alternativen

Auf OMR Reviews findet Ihr eine Übersicht aller HubSpot CMS Hub-Alternativen. So könnt Ihr basierend auf den verifizierten Bewertungen und Erfahrungs-Berichten unserer Nutzer*innen das passende WYSIWYG-Editor-Tool für Euch und Euer Unternehmen auswählen.

3. Adobe Dreamweaver als WYSIWYG-Editor-Programm

Die Adobe Dreamweaver-Software ist speziell für die Erstellung von Websites gedacht. Ihr könnt Euch zwischen den Programmier-Sprachen HTML, CSS und JavaScript entscheiden. Dank der visuellen Darstellung und der Code-Engine könnt Ihr im Handumdrehen programmieren. Zudem umfasst das Software-Paket Startvorlagen für Blogs, E-Commerce-Seiten, Newsletters und HTML-Mails. Wie der Name schon vermuten lässt, ist das WYSIWYG-Tool mit allen Adobe-Programmen kompatibel und ermöglicht Euch die Integration von Creative Cloud-Elementen. 

Adobe Dreamweaver-Funktionen

  • Code-Engine
  • Verwaltung von dynamischen Websites
  • Visuelle Hilfestellung
  • Anpassbare Start-Vorlagen
  • Einbindung von Creative-Cloud- und Adobe-Stock-Elementen
  • Live-Ansicht
  • Moderne, optimierte Benutzer-Oberfläche
  • Git-Unterstützung

Adobe Dreamweaver-Preise

Adobe Dreamweaver kostenpflichtig nutzen

Der Adobe Dreamweaver-Preis hängt von der Art des Abos ab. Entscheidet Ihr Euch für das monatliche Abo, gibt es das WYSIWYG-Tool für 35,69 €/Monat. Das Jahres-Abo gibt es bereits für 23,79 €/Monat. Zudem könnt Ihr das Jahres-Abo 14 Tage kostenlos testen und danach selbst entscheiden, ob dies der passende WYSIWYG-Editor für Euer Unternehmen ist. Mit einem Abo habt Ihr Zugang zu Features wie 100 GB Cloud-Speicherplatz, Tutorials, Adobe Express, Adobe Portfolio, Adobe Fonts, Behance, Creative Cloud-Bibliotheken und vieles mehr.

Adobe Dreamweaver-Alternativen

Auf OMR Reviews findet Ihr eine Übersicht aller Adobe Dreamweaver-Alternativen. So könnt Ihr basierend auf den verifizierten Bewertungen und Erfahrungs-Berichten unserer Nutzer*innen das passende WYSIWYG-Editor-Tool für Euch und Euer Unternehmen auswählen.

4. Brackets als WYSIWYG-Editor-Tool

Der WYSIWYG-Editor von Brackets ist komplett kostenlos!

Der Brackets-WYSIWYG-Editor ermöglicht Euch das Erstellen und Gestalten von Websites direkt im Browser. Er wurde speziell für Web- und Frontend-Entwickler*innen kreiert. Der Text-Editor verfügt über eine Live-Vorschau, sodass Ihr bereits während des Entwicklungsprozesses das Endergebnis im Blick habt. Das WYSIWYG-Tool beeindruckt Nutzer*innen mit seinem modernen Design und der einfachen Bedienung.

Brackets-Funktionen

  • Visuelle Werkzeuge
  • Inline-Redakteure
  • Live-Vorschau
  • Unterstützung von Prä-Prozessoren
  • Unzählige Plug-ins
  • Community-Support 

Brackets-Preise

Und jetzt kommt das Beste: Das Brackets-Tool gibt es komplett kostenlos!

Brackets-Alternativen

Auf OMR Reviews findet Ihr eine Übersicht aller Brackets-Alternativen. So könnt Ihr basierend auf den verifizierten Bewertungen und Erfahrungs-Berichten unserer Nutzer*innen das passende WYSIWYG-Editor-Tool für Euer Unternehmen auswählen.

5. CoffeeCup HTML Editor als WYSIWYG-Editor-Software

Intuitiv und einfach: der WYSIWYG-Editor von CoffeeCup.

Der CoffeeCup HTML Editor unterstützt Euch bei der schnellen Erstellung von Websites und Web-Inhalten. Das WYSIWYG-Tool wird aufgrund seiner intuitiven Bedienung und vielen Features von Nutzer*innen gelobt. Der CoffeeCup Editor schlägt Euch noch während des Tippens Vervollständigungs-Vorschläge für den Code vor. Zudem umfasst er eine Komponenten-Bibliothek, in der Ihr beispielsweise Kopf- und Fußzeilen-Elemente speichern und später wiederverwenden könnt. Dadurch müssen Elemente nur einmal erstellt und bearbeitet werden. Wer mit HTML (noch) überhaupt nichts am Hut hat, kann anfänglich auch auf den CoffeeCup SiteDesigner zurückgreifen.

CoffeeCup HTML Editor-Funktionen

  • Tag-Highlighting
  • Split-Screen und externe Vorschau
  • Responsive Templates
  • Komponenten-Bibliothek
  • SiteDesigner für Anfänger*innen

CoffeeCup HTML Editor-Preise

Free CoffeeCup-HTML-Editor

Die kostenlose Version des CoffeeCup HTML Editors umfasst einige Optionen für einen einfachen Start in die Website-Kreation. Entweder entscheidet Ihr Euch für eine HTML- oder CSS-Datei und beginnt von Grund auf oder Ihr holt Euch ein bestehendes Thema sowie ein vorgefertigtes Design. Auch wenn Ihr bereits eine Website habt, könnte dieses WYSIWYG-Tool hilfreich sein. Dank der Open-from-Web-Option kann jede beliebige Website Euer Ausgangspunkt sein.

CoffeeCup HTML Editor kostenpflichtig nutzen

Ihr könnt die Premium-Version für 21 Tage kostenlos testen. Der Preis für den Premium-CoffeeCup HTML Editor beläuft sich anschließend auf 29 $/Monat. Entscheidet Ihr Euch für diese Version, habt Ihr Zugriff auf alle Features wie Tag-Highlighting, den Vorlagen-Downloader und die Komponenten-Bibliothek. 

CoffeeCup HTML Editor-Alternativen

Auf OMR Reviews findet Ihr eine Übersicht aller CoffeeCup HTML Editor-Alternativen. So könnt Ihr basierend auf den verifizierten Bewertungen und Erfahrungs-Berichten unserer Nutzer*innen das passende WYSIWYG-Editor-Tool für Euch und Euer Unternehmen auswählen.

6. Wix als WYSIWYG-Editor-Programm

Wix bietet Euch eine Komplett-Lösung für die Erstellung von Websites, Online-Shops, Blogs etc. Zudem könnt Ihr Buchungen einfach verwalten und habt dank der mobilen App stets Zugriff auf das Programm. In dem visuellen Editor könnt Ihr Eure Website mittels Drag-and-drop einfach und schnell designen. Das WYSIWYG-Tool umfasst außerdem eine umfangreiche Vorlagen-Bibliothek, aus der Ihr Euch Inspiration holen und Vorlagen individuell anpassen könnt. Mithilfe des Dev-Tool Velo by Wix könnt Ihr über 100 APIs verbinden und integrierte Datenbanken erstellen.

Wix-Funktionen

  • HTML-Input
  • Personalisierter SEO-Plan
  • Website-Analytics
  • Content-Management
  • Mobile App
  • Drag-and-drop-Editor
  • Dev-Tool Velo by Wix

Wix-Preise

Wix kostenpflichtig nutzen

Die Wix-Preise unterscheiden sich je nach Anforderungen. Die Connect-Domain-Version bekommt Ihr bereits für 5,50 €/Monat. Sie umfasst die Verbindung zu Eurer Domain, eine SSL-Verschlüsselung, 1 GB Bandbreite, 500 MB Speicherplatz sowie den Standard-Support.

Die Combo-Variante gibt es für 10 €/Monat. Ihr erhaltet zusätzlich eine Domain für ein Jahr, 2 GB Bandbreite sowie 3 GB Speicherplatz, eine mögliche Videolänge von 30 Minuten und einen 400 €-Werbegutschein. 

Die Unlimited-Version für Unternehmen und Selbstständige kostet 17 €/Monat und wird durch eine Site-Booster- sowie eine Visitor-Analytics-App ergänzt. Beide Apps könnt Ihr für ein Jahr nutzen. Zudem ist die Bandbreite unbegrenzt und der Speicherplatz umfasst 10 GB. Auch die verfügbare Videolänge wird auf eine Stunde erhöht.

Die Crème de la Crème ist die VIP-Variante mit 35 GB Speicherplatz. Sie ermöglicht eine Videolänge von fünf Stunden, die Erstellung professioneller Logos und Social-Media-Logo-Dateien sowie Zugriff auf den Premium-Support. Diese Version gibt es für 29 €/Monat.

Ihr könnt alle Premium-Pakete 14 Tage kostenlos testen.

Wix-Alternativen

Auf OMR Reviews findet Ihr eine Übersicht aller Wix-Alternativen. So könnt Ihr basierend auf den verifizierten Bewertungen und Erfahrungs-Berichten unserer Nutzer*innen das passende WYSIWYG-Editor-Tool für Euch und Euer Unternehmen auswählen.

7. CKEditor als WYSIWYG-Editor-Tool

Klares Design und intuitive UX: das WYSIWYG-Tool von CKEditor.

CKEditor ist ein WYSIWYG-HTML-Editor mit einer sauberen UI und klaren UX, der sich für viele Anwendungs-Bereiche eignet. Zudem bietet das WYSIWYG-Tool einige Plugin-Optionen, sodass Ihr es personalisieren und auf Eure Wünsche abstimmen könnt. Dank Track-Changes, einer Revision-History und Comments können mehrere Nutzer*innen gleichzeitig an einem Projekt arbeiten und sich austauschen.

CKEditor-Funktionen

  • Kollaborative Bearbeitung
  • File-Management
  • Personalisierbare Themen und Symbolleisten
  • Grammatik- und Rechtschreib-Prüfung
  • Technischer Support und Open-Source-Community
  • Mehrsprachigkeit

CKEditor-Preise

CKEditor Free

Als Open-Source-Programm könnt Ihr die Standard-Version der Software mittels GNU-General-Public-License kostenfrei nutzen. Diese Version beinhaltet auch den Community-Support und die CKBox – eine File-Management-Plattform.

CKEditor kostenpflichtig nutzen

Die CKEditor-Preise variieren je nach Anforderungen. Zum Beispiel könnt Ihr für 29 $/Monat die Export-to-PDF-Funktion dazubuchen. Für 39 $/Monat mehr gibt es auch das Export-to-Word- und für weitere 39 $/Monat auch das Import-from-Word-Feature. Abhängig von Euren Unternehmens-Bedürfnissen und den gewünschten Premium-Features übermittelt Euch das Team von CKEditor auf Anfrage auch ein maßgeschneidertes Angebot.

CKEditor-Alternativen

Auf OMR Reviews findet Ihr eine Übersicht aller CKEditor-Alternativen. So könnt Ihr basierend auf den verifizierten Bewertungen und Erfahrungs-Berichten unserer Nutzer*innen das passende WYSIWYG-Editor-Tool für Euch und Euer Unternehmen auswählen.

Fazit: Mit dem „What you see is what you get”-Prinzip könnt Ihr schnell und einfach Websites und Web-Inhalte erstellen

Unternehmer*innen sind oft mit vielen Dingen gleichzeitig beschäftigt. Nebenbei noch eine Programmier-Sprache für die Website-Erstellung zu lernen, ist da meist unmöglich. Dank moderner WYSIWYG-Tools ist das auch nicht nötig. Mit den passenden WYSIWYG-Editors wird die Website-Erstellung und -Gestaltung zum Kinderspiel. Und das Beste daran? Ihr seht schon während des Design-Prozesses, wie Euer fertiges Meisterwerk aussehen wird. 

Sarah Magdalena Huber
Autor*In
Sarah Magdalena Huber
Autor*In
Sarah Magdalena Huber

Sarah ist sprachaffin und liebt Herausforderungen. Die gebürtige Österreicherin verfasst und übersetzt Texte in Deutsch, Englisch und Spanisch. Sie ist seit einigen Jahren selbständige Übersetzerin und Dolmetscherin und schreibt als freie Redakteurin bei OMR Reviews zu den Themen Software und Co.

Alle Artikel von Sarah Magdalena Huber

Im Artikel erwähnte Softwares

Im Artikel erwähnte Software-Kategorien