WYSIWYG: Die besten 14 HTML-Editoren im Überblick

Download: Webentwicklung lernen
Janina Rybka
Janina Rybka

Veröffentlicht:

Die Erstellung von Webinhalten erfolgt in der Regel über Quellcode, also ein von Menschen geschriebener Text, den Maschinen ausführen können und der alle Funktionen und Anwendungen definiert. Um diese Befehle zu beherrschen, ist es erforderlich, eine Programmiersprache zu erlernen. Eine einfachere Alternative für Anwenderinnen und Anwender sind WYSIWYG-Editoren. Sie erleichtern das Webdesign erheblich.

Stilistische Darstellung eines Laptops mit einem WYSIWYG-Editor

Ich zeige Ihnen hier, was hinter dem Akronym steht und stelle Ihnen meine 14 liebsten WYSIWYG-Editoren vor.

→ Jetzt professionelle Website erstellen [Kostenloses Tool]

14 nützliche WYSIWYG-Editoren: Kurze Übersicht

Es gibt ganz unterschiedliche WYSIWYG-Editoren, die Ihnen teils kostenlos und teils kostenpflichtig zur Verfügung stehen. Wir stellen Ihnen die 14 der bekanntesten und populärsten Programme vor, für die Sie keine HTML-Kenntnisse benötigen.

Anbieter Preis Geeignet für
HubSpot WYSIWYG-Editor Kostenlos Erstellung von Inhalten und Integration direkt in HubSpot
Brackets Kostenlos Direktes Bearbeiten von HTML/CSS mit Live-Vorschau, speziell für Chrome optimiert
RocketCake Kostenlos, 49 Euro für professionelles Paket Einfache Erstellung responsiver Websites ohne Code-Kenntnisse
Bubble Kostenlos, erweiterte Pakete: ab 32 US-Dollar pro Monat Erstellung voll funktionsfähiger Webanwendungen ohne Code
CoffeeCup SiteDesigner Kostenlos, Pakete ab 99 US-Dollar Schnelle Website-Erstellung mit vordefinierten HTML/CSS-Blöcken
TinyMCE Kostenlos, erweiterte Pläne: ab 80 US-Dollar pro Monat Große Projekte mit Bedarf an Erweiterbarkeit durch Plugins
CKEditor Individuelle Preispläne Einfache Seiten mit Möglichkeiten zur Individualisierung durch Plugins
Editor.js Kostenlos Block-basierte Inhaltsbearbeitung für einfache Website-Updates
Dreamweaver Ab 25,99 Euro pro Monat, kostenlose Testversion Professionelles Webdesign und direkte Bearbeitung von mobilen Ansichten
Froala Ab 899 US-Dollar pro Jahr, kostenlose Testversion Rich-Text-Editing mit hoher Anpassbarkeit
Pinegrow Ab 93,71 US-Dollar pro Jahr (pro Nutzer), 30 Tage Geld-zurück-Garantie Responsive Webdesign
Wix Ab 11 Euro pro Monat, 14 Tage Geld-zurück-Garantie Website-Erstellung über simples Baukastenprinzip
Hostinger Ab 11,99 Euro pro Monat, 30 Tage Geld-zurück-Garantie Website-Erstellung mit integriertem Hosting
Webflow Ab 18 US-Dollar pro Monat Design-orientierte Webentwicklung mit voller Designkontrolle ohne Code

Kostenlose WYSIWYG-HTML-Editoren

Um Ihnen die Auswahl leichter zu machen, habe ich zunächst alle Editoren gesammelt und beschrieben, die Sie kostenlos nutzen können.

1. HubSpot WYSIWYG-Editor

WYSIWYG-editing-de

Quelle: Screenshot HubSpot

Der HubSpot WYSIWYG-Editor ist Teil unseres Content Hubs (Content-Management-System) und bietet eine intuitive, Drag-and-drop-basierte Benutzeroberfläche. So können Sie ohne Programmierkenntnisse Websites visuell gestalten und bearbeiten. Der Editor ist eng mit unseren anderen HubSpot-Produkten verknüpft.

Sie können entweder auf die vielfältigen Vorlagen zurückgreifen oder einzelne Module selbst gestalten.

Funktionen

  • Intuitive WYSIWYG-Oberfläche für Live-Ansicht aller Änderungen
  • Responsives Design
  • SEO-Elemente können direkt im Editor eingefügt werden
  • Integration des HubSpot CRMs, um Website-Interaktionen direkt zu erfassen

Warum ich den HubSpot WYSIWYG-Editor empfehle

  • Verknüpfung mit anderen HubSpot-Produkten macht den Editor für HubSpot-Nutzende zur perfekten Wahl
  • Sehr benutzerfreundlich und für Anfänger sowie Anfängerinnen durch intuitive Oberfläche geeignet
  • Fortgeschrittene können auch den Code direkt bearbeiten

Preis

Unser WYSIWYG-Editor ist Teil des Content Hubs und daher kostenlos. Möchten Sie mehr Funktionsumfang, dann erwerben Sie unser Starter Paket ab 20 Euro pro Monat (bei monatlicher Zahlung).

2. Brackets

wysiwyg brackets

Quelle: Screenshot Brackets

Brackets ist ein WYSIWYG-Editor von Adobe. Grundsätzlich handelt es sich hierbei um einen Text-Editor, der allerdings mit einer Vorschaufunktion ausgestattet ist. Somit können Sie das Ergebnis Ihrer Arbeit im Vorfeld so begutachten und wissen dadurch genau, wie Ihre Seite am Ende aussehen wird.

Bei der Nutzung von Brackets sollten Sie jedoch beachten, dass die Ausgaben nur für Google Chrome geeignet sind. Bei allen anderen Browsern ist es wichtig, dass Sie im Nachhinein prüfen, wie die mit dem Quellcode erstellten Inhalte ausgegeben werden.

Funktionen

  • Live-Vorschau für alle Änderungen im HTML- und CSS-Code
  • Hunderte Erweiterungen für den Editor
  • Unterstützt CSS-Preprozessoren wie LESS und SASS
  • Smarte Code-Vervollständigung für schnelleres Programmieren

Warum ich Brackets empfehlen kann

  • Komplett kostenloser Open-Source-Editor
  • Große Community, die immer wieder neue Plugins und Updates entwickelt

Preis

Brackets ist komplett kostenlos.

3. RocketCake

wysiwyg rocketcake_klein

Quelle: Screenshot RocketCake

RocketCake ist ein weiterer kostenloser HTML-Editor. Er ist so einfach gehalten, dass Sie keinerlei HTML- oder CSS-Fachwissen haben müssen, um ihn nutzen zu können. Eine besondere Stärke von RocketCake besteht darin, dass Sie damit responsive Webseiten erstellen können, die sich speziell für mobile Endgeräte eignen.

Funktionen

  • Code wird automatisch responsiv generiert
  • Vorlagen, um Websites schneller zu gestalten
  • CSS, HTML, JavaScript und PHP-Code können individuell eingefügt werden
  • Unterstützung verschiedener Elemente wie Videos, Bildergalerien und so weiter

Warum ich RocketCake empfehle

  • Breite Palette an Funktionen, sowohl für Anfängerinnen und Anfänger als auch Fortgeschrittene geeignet
  • Günstige Professional-Version mit schnellem Support

Preis

RocketCake ist kostenlos und für Windows und macOS erhältlich. Die „Professional Edition“ kostet einmalig 49 Euro und bietet erweiterte Funktionen.

4. Bubble

wysiwyg bubble-1

Quelle: Screenshot Bubble

Bubble ist eine No-Code-Plattform, die sich ideal für die Erstellung voll funktionsfähiger Webanwendungen eignet. Mit einem sogenannten „Point-and-Click-Editor“ können Sie Anwendungen und Workflows erstellen und anpassen – egal, ob es sich um einfache Prototypen, SaaS-Produkte oder ganze Marktplätze handelt.

Mit diesem WYSIWYG-Editor der etwas anderen Art können Sie auch Logik-Abläufe in Workflow-Programme integrieren. So lässt sich zum Beispiel genau programmieren, was passiert, wenn ein User bzw. eine Userin die Anwendung oder Website durchläuft und auf verschiedene Elemente klickt.

Funktionen

  • Visueller WYSIWYG-Editor mit intuitiver Oberfläche
  • Erstellung benutzerdefinierter Workflows
  • Rest-API zur Integration in Facebook, Google Analytics, SQL und viele weitere Dienste

Warum ich Bubble empfehle

  • Echtzeit-Zusammenarbeit an einem Projekt inklusive Versionierung ist möglich
  • Deployment und Hosting wird bereitgestellt
  • Umfangreiche Bibliothek mit verschiedenen Elementen

Preis

Bubble ist in einer kostenlosen Version erhältlich. Zudem gibt es erweiterte Pakete, die zwischen 32 und 399 US-Dollar monatlich bei monatlicher Zahlung (und mehr nach Absprache) kosten.

5. CoffeeCup SiteDesigner

wysiwyg coffeecup_klein

Quelle: Screenshot CoffeeCup

Der CoffeeCup SiteDesigner ist ein sehr benutzerfreundlicher WYSIWYG-Editor, der sich sowohl an Anfänger als auch fortgeschrittene Webentwicklerinnen richtet. Sie können damit vor allem schnell Websites erstellen – Vorlagen, eine Bibliothek für bereits verwendeten Content und Autovervollständigung von Code tragen ihren Teil dazu bei.

Zudem gibt es verschiedene Preview-Möglichkeiten. Sie können sich etwa zwischen einer Split-Screen-Preview und der klassischen Vorschau in einem neuen Fenster oder auf einem zweiten Bildschirm entscheiden.

Funktionen

  • Verschiedene Live-Previews, um Änderungen sofort zu sehen und zu testen
  • Viele vordefinierte HTML- und CSS-Codeblöcke
  • Direkte Bearbeitung im Code oder im visuellen Editor
  • Validierungstools sorgen dafür, dass der Code den aktuellen Webstandards entspricht
  • Eingebauter FTP-Client, der das Hochladen der Website(s) auf einen Server vereinfacht

Warum ich den CoffeeCup Site Designer empfehle

  • Möglichkeit, Elemente in der Bibliothek für weitere Projekte zu speichern
  • Kostenlose, responsive Templates
  • Mehrere verschiedene Preview-Funktionen

Preis

Es gibt eine kostenlose Version des CoffeeCup HTML Editors. Für die „Profiversion“ des SiteDesigners werden einmalig 99 US-Dollar fällig.

6. TinyMCE

wysiwyg tinymce_klein

Quelle: Screenshot TinyMCE

TinyMCE ist ein Rich-Text-Editor, der unter anderem von Evernote, Atlassian und Medium verwendet wird. Der Editor lässt sich einfach integrieren und unterstützt die Einbindung von Frameworks wie Angular, React und Vue. Sie können TinyMCE mit über 50 Plugins erweitern, die jeweils über 100 Anpassungsoptionen bieten.

Funktionen

  • Umfangreicher WYSIWYG-Editor, auch bereits in der kostenlosen Version
  • „PowerPaste“, mit dem Inhalte etwa aus Word, Google Docs oder HTML integriert werden können
  • KI-Assistent für die Erstellung des Contents
  • Viele Templates für die Website-Erstellung

Warum ich TinyMCE empfehlen kann

  • Auswahl aus verschiedenen WYSIWYG-Editoren (unter anderem KI-unterstützt oder auf Templates basierend)
  • Über 50 Plugins, mit denen die Website weiter individualisiert werden kann
  • Cloud-Sicherheitsfunktionen

Preis

TinyMCE bietet eine kostenlose Version an, die Cloud-basiert ist. Wer mehr Funktionen und Freiheiten möchte, muss 80 US-Dollar für die Essential- und 155 US-Dollar für die Professional-Version bezahlen – jeweils monatlich bei monatlicher Zahlung. Eine Enterprise-Version gibt es auf Anfrage.

7. CKEditor

wysiwyg ckeditor_klein

Quelle: Screenshot CKEditor

CKEditor ist ein Browser-basierter WYSIWYG-HTML-Editor, mit dem Sie flexibel dank vieler Plugins Ihren Web-Content erstellen können. Der Editor wurde bereits 2003 zum ersten Mal veröffentlicht und zählt seither zu den bekanntesten und verlässlichsten Tools auf dieser Liste.

Zudem bietet CKEditor die Möglichkeit, mit mehreren Personen gleichzeitig an einem Projekt zu arbeiten. Alle Änderungen lassen sich nachverfolgen und mit Kommentaren versehen.

Funktionen

  • Open-Source-Community, die bei der Entwicklung des WYSIWYG-Editor mitarbeitet
  • Kollaborationstools für größere Teams, die an einem Projekt arbeiten, inklusive Datenmanagement-Tool
  • KI-Assistent für die Texterstellung und -bearbeitung
  • Import-/Exportfunktionen (unter anderem für Word-Dokumente)
  • Grammatik- und Rechtschreibprüfung

Warum ich CKEditor empfehle

  • Editor kann in Farbe, Sprache, Abmessungen, Symbolleisten und weiteren Punkten individuell angepasst werden
  • Mehr als 100 Plugins zur Erweiterung der Möglichkeiten
  • Media Embed-Plugin ermöglicht das Einfügen von Videos, Tweets, Instagram-Posts, Code-Snippets und weiteren Elementen

Preis

Die Open-Source-Version von CKEditor ist kostenlos. Zusätzliche Funktionen wie der Word-Import kosten jedoch extra. Zudem gibt es eine „Commercial License“, deren Preis Sie auf Anfrage erhalten.

8. Editor.js

wysiwyg editorjs

Quelle: Screenshot Editor.js

Editor.js ist ein Open-Source-WYSIWYG-Editor, mit dem Sie auf einfache Art und Weise Inhaltsblöcke bearbeiten, verschieben und neu anordnen können. Er hat uns im Test an den bekannten Gutenberg-Editor von WordPress erinnert.

Wenn Sie auf einen Block klicken, werden die spezifischen Optionen angezeigt, die für dieses Element verfügbar sind. Wenn Sie auf Textinhalte klicken, werden Optionen für Textformatierung und Inline-Stile angezeigt. Das macht den Editor gerade für Anfängerinnen und Anfänger sehr zugänglich.

Funktionen

  • Hinzufügen und Bearbeiten verschiedener Inhaltsblöcke (unter anderem Bilder, Listen oder Texte)
  • Unterstützt diverse Plugins
  • Erzeugt JSON-Daten für das Web, Apps, Facebook Instant Articles und Google AMP

Warum ich Editor.js empfehle

  • Kostenlos und Open Source
  • Umfangreiche Dokumentation
  • Bewusst so gestaltet, dass Plugins und Erweiterungen über die API-Schnittstelle integriert werden können

Preis

Editor.js ist komplett kostenlos.

Kostenpflichtige WYSIWYG-Web-Builder

Sollten Sie größere Ziele verfolgen, alles aus dem WYSIWYG-Prinzip herausholen sowie mehr Funktionen haben wollen, sind kostenpflichtige Anwendungen eventuell die bessere Wahl.

9. Dreamweaver

wysiwyg dreamweaver_klein

Quelle: Screenshot Adobe

Dreamweaver existiert bereits seit 1997. Heutzutage können Sie es sowohl als WYSIWYG-Editor als auch in einem sogenannten Code-Modus nutzen. Angenehm ist, dass beide Modi parallel angezeigt werden können, sodass Ihnen die mit dem Quellcode vorgenommenen Änderungen unmittelbar angezeigt werden.

Eine Stärke von Adobe Dreamweaver ist, dass Sie sich damit auch Ausgaben auf mobilen Endgeräten anzeigen lassen können. Zudem haben Sie die Möglichkeit, durch einen QR-Code eine Verbindung zwischen den Endgeräten und einem aktuellen Projekt herzustellen.

Funktionen

  • Live-Vorschau mit Änderungsansicht in Echtzeit
  • Multi-Monitor-Setup für Arbeiten an mehreren Bildschirmen
  • Integration in andere Adobe-Tools
  • Anpassbare Templates für Blogs, E-Commerce-Shops, Portfolio-Websites und viele mehr

Warum ich Dreamweaver empfehle

  • Möglichkeit, Elemente aus Creative-Cloud-Bibliotheken und Adobe Stock einzubinden, daher für Adobe-Userinnen und -User gut geeignet
  • Bearbeitung in der Live-Ansicht
  • Sehr moderne Benutzeroberfläche

Preis

Um Dreamweaver nutzen zu können, müssen Sie ein Creative-Cloud-Abonnement abschließen. Unternehmen können das Programm zunächst für 14 Tage kostenlos testen und müssen dann mindestens 25,99 Euro im Monat zahlen.

10. Froala

wysiwyg froala_klein

Quelle: Screenshot Froala

Froala ist ein WYSIWYG-HTML-Editor, der in JavaScript geschrieben ist. Er enthält integrierte Rich-Text-Funktionen und bietet, wie viele der anderen Editoren auch, Erweiterungsmöglichkeiten über die eigene API-Schnittstelle.

Der Editor hat ein sehr klares und intuitives Design, mit dem Sie Websites verhältnismäßig schnell erstellen können. Auch die Funktion, in Echtzeit mit anderen Teammitgliedern an einem Projekt zu arbeiten, hat uns bei Froala überzeugt.

Funktionen

  • Verschiedene Editor-Typen, je nach Anforderung
  • Mehr als 170 Inhaltsblöcke, die für die Website verwendet werden können
  • 35 Plugins
  • Unterstützt die Einbindung von Content aus über 500 verschiedenen Online-Quellen mittels Embed.ly

Warum ich Froala empfehle

  • Zu einem hohen Grad anpassbar dank API und SDKs
  • Kollaborationstools für Echtzeit-Zusammenarbeit
  • Sehr schneller Editor (Initialisierung in weniger als 40 ms)

Preis

Froala kostet jährlich 899 US-Dollar im Professional- und 1.999 US-Dollar im Enterprise-Paket. Alternativ können Sie den WYSIWYG-Editor für einmalig 2.699 US-Dollar oder 5.999 US-Dollar kaufen.

11. Pinegrow

wysiwyg pinegrow_klein

Quelle: Screenshot Pinegrow

Pinegrow ist ein leistungsstarker WYSIWYG-Editor, der sich durch seine vielen Funktionen für responsives Webdesign auszeichnet. Es ist ein beliebtes Tool bei Frontend-Entwicklern und Designerinnen, die schnell Websites erstellen und bearbeiten möchten.

Sie können in Pinegrow mit mehreren Personen gleichzeitig an Projekten arbeiten.

Funktionen

  • Intuitiver Drag-and-Drop-WYSIWYG-Editor
  • CSS- und SASS-Integration
  • Bearbeiten mehrerer Seiten gleichzeitig mit Echtzeit-Preview

Warum ich Pinegrow empfehle

  • Viele CMS-Funktionen und direkte WordPress-Unterstützung
  • Editor unterstützt eine ganze Reihe von Frameworks und Technologien

Preis

Pinegrow ist für jährlich rund 112 Euro pro Lizenz nutzbar. Zudem gibt es Pakete mit Erweiterungen, etwa einen WordPress Builder für rund 56 Euro pro Jahr. Alternativ können Sie Pinegrow (und die Erweiterungen) einmalig erwerben. Der Editor allein kostet knapp 169 Euro. Es wird eine 30 Tage Geld-zurück-Garantie angeboten.

12. Wix

wysiwyg wix_klein

Quelle: Screenshot Wix

Wix ist vor allem für seinen Homepage-Baukasten bekannt – dieser basiert auf einem WYSIWYG-Editor. Sie können mit dem Tool auch Online-Shops oder Blogs erstellen. Der Editor selbst ist für Anfängerinnen und Anfänger dank Drag-and-Drop-Prinzip einfach zu handhaben und bietet viele Vorlagen.

Zudem gibt es die Möglichkeit, APIs zu verbinden und integrierte Datenbanken zu erstellen. Auch SEO kommt bei Wix mit verschiedenen Funktionen nicht zu kurz.

Funktionen

  • Drag-and-drop-Editor mit WYSIWYG-Prinzip
  • Viele SEO-Tools zur Optimierung der Sichtbarkeit in den Suchergebnissen
  • E-Commerce-Funktionen zur Erstellung von Online-Shops
  • Möglichkeit, HTML zu integrieren

Warum ich Wix empfehle

  • Besonders für Anfängerinnen und Anfänger dank intuitiver Oberfläche geeignet
  • Sehr viele Vorlagen und Anpassungsoptionen für individuelle Seitengestaltung

Preis

Wix bietet insgesamt vier Preisstufen an. Das Light-Paket kostet 13,09 Euro, am teuersten ist das Paket „Business Elite“ für 177,31 Euro. Alle Preise basieren auf der monatlichen Zahlung. Wix bietet eine 14 Tage Geld-zurück-Garantie.

13. Hostinger

wysiwyg hostinger_klein

Quelle: Screenshot Hostinger

Wie Wix ist auch Hostinger in erster Linie als Website-Baukasten bekannt. Sollten Sie einen Anbieter suchen, bei dem die erstellte Website auch zuverlässig gehostet wird, sind Sie bei Hostinger richtig. Der WYSIWYG-Editor ist sehr übersichtlich und bietet unter anderem KI-Unterstützung, die die Erstellung der Seite noch einfacher machen.

Zudem gibt es auch hier SEO-Tools, die im Leistungsumfang integriert sind. Eine parallele Bearbeitung wie bei anderen Editoren ist allerdings nicht möglich.

Funktionen

  • Drag-and-drop-Editor mit WYSIWYG-Prinzip
  • Viele SEO-Tools zur Optimierung der Sichtbarkeit in den Suchergebnissen
  • E-Commerce-Funktionen zur Erstellung von Online-Shops
  • Möglichkeit, HTML zu integrieren

Warum ich Hostinger empfehle

  • Preise sind sehr fair
  • Integration von KI-Tools in den Erstellungsprozess
  • Schnelle Websites dank LiteSpeed Webserver-Technologie

Preis

Die Pakete bei Hostinger beginnen bei 11,99 Euro und reichen bis zu 19,99 Euro monatlich für die Version mit den meisten Funktionen. Zudem gibt es eine 30 Tage Geld-zurück-Garantie.

14. Webflow

wysiwyg webflow

Quelle: Screenshot Webflow

Webflow ist ein sehr modernes Design-Tool, mit dem Sie via WYSIWYG-Editor professionelle, responsive Websites ohne Programmierkenntnisse erstellen können. Gerade bei Design-Profis, die ihre visuellen Ideen in voll funktionsfähige Websites umsetzen möchten, ist Webflow oft die erste Wahl.

Funktionen

  • Intuitive Drag-and-Drop-Oberfläche
  • Volle Designkontrolle über CSS, HTML und JavaScript, ohne selbst Code zu schreiben
  • Viele Animationen und Interaktionen als Elemente
  • Integriertes CMS

Warum ich Hostinger empfehle

  • CMS- und E-Commerce-Integration
  • Große Bibliothek mit vielen Vorlagen und Elementen

Preis

Webflow kostet zwischen 18 und 49 US-Dollar monatlich (bei monatlicher Zahlung). Es gibt theoretisch auch eine kostenlose Version, die ich aber nicht für professionelle Projekte empfehle – dafür ist diese mit beispielsweise nur zwei möglichen Seiten zu eingeschränkt.

WYSIWYG-HTML-Editor auswählen: Worauf muss ich achten?

Bevor Sie sich für einen WYSIWYG-HTML-Editor entscheiden, sollten Sie sich einige Punkte überlegen. Ich habe meine wichtigsten vier Entscheidungskriterien und -fragen zusammengestellt.

1. Welche Integrationen sind möglich?

Überlegen Sie, welche Art von App oder Website Sie entwickeln möchten. Listen Sie dann die Integrationen und Programmiersprachen auf, mit denen der Editor arbeiten soll.

Aus meiner Sicht ist die Berücksichtigung der Integrationen entscheidend. So stellen Sie sicher, dass Ihr gewählter Editor mit der Architektur der Website oder App übereinstimmt und es später keine ärgerlichen Kompatibilitätsprobleme gibt.

2. Ist der Editor SEO-freundlich?

Strukturierte Daten helfen Suchmaschinen wie Google dabei, Inhalte zu verarbeiten und zu verstehen. Sie sind daher der zweite wichtige Faktor, den Sie bei der Auswahl des geeigneten WYSIWYG-Editors berücksichtigen sollten.

Selbst wenn eine Website über einen Editor perfekt aussieht – sofern sie über Google nicht gefunden wird, nützt all das nichts. Wählen Sie also einen Editor aus, der SEO-freundlich ist. Denken Sie daran: Es geht nicht nur darum, wie Ihre Website aussieht, sondern auch darum, wie sie von Suchmaschinen verstanden und gefunden wird.

3. Gibt es ausreichend Anpassungsmöglichkeiten?

Ein weiterer Punkt, den ich aus meiner Erfahrung mit WYSIWYG-Web-Buildern gelernt habe: Es ist wichtig, auch über Standard-Templates und -Designs hinauszugehen, um sich mit der Online-Präsenz abzuheben.

Ein Editor sollte also umfangreiche Anpassungsmöglichkeiten bieten, damit Sie die Benutzererfahrung an die Bedürfnisse Ihrer Zielgruppe anpassen können und die Website nicht nur zu einer kalten Oberfläche, sondern zu einem Spiegelbild Ihrer Marke wird.

4. Gibt es zeitsparende Funktionen und Automatisierung?

Effizienz ist alles. Funktionen wie das erweiterte Einfügen von Code, eine unkomplizierte Benutzeroberfläche und Kollaborationstools sind oft äußerst hilfreich, um viel Zeit zu sparen. Es kann beispielsweise bei größeren Projekten ein Gamechanger sein, wenn mehrere Personen gleichzeitig an der Website arbeiten können.

WYSIWYG-HTML-Editoren: Funktionen und Funktionsweise

Der Begriff WYSIWYG klingt kompliziert, bedeutet für Sie allerdings – wie Sie inzwischen gemerkt haben – viele Möglichkeiten. Mit WYSIWYG-Editoren ist es Ihnen möglich, Content für das Web anzufertigen und zusammenzustellen, der in der fertigen Version genauso aussieht, wie er auf dem Bildschirm zu sehen ist. Hiermit ist es Nutzenden ohne Programmierfähigkeiten und Kenntnissen zum Quellcode möglich, Webinhalte zu erstellen, zu bearbeiten und zu veröffentlichen.

In der Regel kommen sogenannte HTML-Editoren zum Einsatz. Diese zeichnen sich durch eine hohe Nutzerfreundlichkeit aus, weil Verwender bzw. Verwenderinnen sie intuitiv anwenden können.

Zu den Funktionen solcher WYSIWYG-Editoren gehört, dass die Nutzenden verschiedene Inhaltsblöcke verwenden können – für Texte, Videos, Bilder, Tabellen und so weiter. Viele Anbieter haben auch KI in ihre Prozesse integriert, womit der Content teilweise generiert wird. Die meisten Softwares und Apps kommen mit einem Drag-and-Drop-Editor und einer Live-Vorschau der Änderungen daher.

Vor- und Nachteile von WYSIWYG

Mit WYSIWYG-Editoren gehen meiner Erfahrung nach verschiedene Vor- und Nachteile einher, die ich in der folgenden Tabelle einmal zusammengefasst habe:

VORTEILE VON WYSIWYG-EDITOREN NACHTEILE VON WYSIWYG-EDITOREN
einfache Handhabung nur begrenzt Einfluss auf die Formatierung
kein Web-Developer bzw. -Developerin erforderlich nicht immer zuverlässig, da verschiedene Browser und mobile Endgeräte Inhalte jeweils anders ausgeben
ohne Wissen zu HTML und CSS verwendbar  
eignet sich für ganz unterschiedliche Webprojekte, Programme und Anwendungen WYSIWYG-Editoren erzeugen gelegentlich unnötig komplizierte und fehleranfällige Codes
mit CMS kompatibel, die das WYSIWYG-Prinzip nutzen die Fehlersuche am Code erweist sich als schwer
leichtes Editieren und Bearbeiten  
Quellcode kann so erstellt werden, dass er die Search Engine Optimization (SEO) unterstützt

Der WYSIWYG-Editor und seine Geschichte

WYSIWYG-Editoren entstanden in den frühen 1970er-Jahren, als erste Textverarbeitungsprogramme so entwickelt wurden, dass Benutzerinnen und Benutzer die Dokumente auf dem Bildschirm so sehen konnten, wie sie letztlich auch gedruckt wurden.

Ursprünglich am Xerox PARC von Charles Simonyi und Butler Lampson entwickelt, wurden diese Editoren durch Programme wie WordStar und später Microsoft Word vor allem in den 80er-Jahren populär. Heute unterstützen sie auch die Gestaltung komplexer Websites ohne tiefgreifende Programmierkenntnisse und sind für viele in der digitalen Content-Erstellung unverzichtbar.

What you see is what you get: Darum lohnt sich der Einsatz von WYSIWYG-Editoren

WYSIWYG-Editoren sind aus unserer digitalen Welt kaum mehr wegzudenken. Sie eignen sich für die Texterstellung ebenso wie für das Webdesign und das Bearbeiten von Inhalten. Für unterschiedliche Anliegen gibt es jeweils andere Editoren, die durch ihre Funktionen und Fähigkeiten überzeugen.

Es lohnt sich, die unterschiedlichen WYSIWYG-Editoren genauer unter die Lupe zu nehmen, die ich Ihnen vorgestellt habe. Mein Tipp: Nutzen Sie die Testversionen oder Probezeiträume, die viele Tools anbieten. So merken Sie schnell und ohne etwas zu bezahlen, ob Sie mit der Software oder dem Online-WYSIWYG-Editor zurechtkommen.

Kostenloses Tool: WYSIWYG-Editor

Titelbild: HubSpot

Themen: Webentwicklung

Verwandte Artikel

Pop-up für DOWNLOAD: WEBENTWICKLUNG LERNEN WEBENTWICKLUNG LERNEN

Dieser Guide gibt Ihnen Tipps und Methoden an die Hand, wie Sie die Webentwicklung möglichst einfach erlernen können.

KOSTENLOS HERUNTERLADEN
Pop-up für DOWNLOAD: WEBENTWICKLUNG LERNEN WEBENTWICKLUNG LERNEN

CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience

START FREE OR GET A DEMO