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.
Ich zeige Ihnen hier, was hinter dem Akronym steht und stelle Ihnen meine 14 liebsten WYSIWYG-Editoren vor.
Was ist WYSIWYG?
WYSIWYG ist eine Abkürzung und steht für „What you see is what you get“, zu Deutsch: „Was du siehst, ist, was du bekommst“. Dabei handelt es sich um spezielle Editoren, die es durch Drag-and-Drop-Funktion auch Anfängern und Anfängerinnen möglich machen, Websites zu konzipieren. Anders gesagt: Sie sehen in der Ausgabe genau das, was später auch im Web angezeigt wird.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
Titelbild: HubSpot