WYSIWYG (What You See Is What You Get) bezeichnet einen Inhaltseditor, bei dem die Darstellung während des Bearbeitens dem späteren veröffentlichten Ergebnis direkt entspricht.
Was bedeutet das?
Der Begriff WYSIWYG stammt aus den frühen 1970er Jahren und wurde populär durch grafische Texteditoren, die Formatierungen wie Fettdruck, Überschriften und Tabellen direkt auf dem Bildschirm abbildeten. Das Prinzip: Was der Autor sieht, entspricht dem, was später gedruckt oder im Browser angezeigt wird. Redakteure benötigen kein HTML- oder CSS-Wissen, um formatierten Inhalt zu erstellen.
Im WordPress-Kontext war der TinyMCE-Editor (Classic Editor) das bekannteste WYSIWYG-Werkzeug. Seit WordPress 5.0 (Dezember 2018) wurde er durch den Gutenberg-Block-Editor ersetzt, der das WYSIWYG-Konzept auf Blockebene weiterführt: Texte, Bilder, Tabellen und Medien werden als eigenständige Blöcke direkt in der Seitenvorschau bearbeitet. Page Builder wie Elementor oder WPBakery gehen noch weiter und ermöglichen das visuelle Gestalten vollständiger Layouts per Drag-and-Drop, ohne die Bearbeitungsebene zu verlassen.
Der Gegenentwurf zu WYSIWYG ist die direkte Eingabe von HTML oder Markdown-Syntax, bei der die endgültige Darstellung erst nach dem Speichern und Rendern im Browser sichtbar wird. Für technisch versierte Entwickler kann das schneller und präziser sein; für Redakteure ohne Programmierkenntnisse ist der WYSIWYG-Ansatz die zugänglichere und fehlerunanfälligere Wahl.
Beispiel aus der Praxis
Eine Redakteurin schreibt einen neuen Blogbeitrag in WordPress. Im Gutenberg-Editor wählt sie einen Absatz-Block, tippt ihren Text, markiert einen Begriff und klickt auf „Fett“ in der Block-Werkzeugleiste. Der Begriff erscheint sofort fettgedruckt, genau so, wie er später auf der Website aussehen wird. Sie fügt einen Bild-Block ein und sieht das Foto in der vorgesehenen Größe. Als sie den Beitrag veröffentlicht, unterscheidet sich die Ansicht für Besucher nicht von dem, was sie während des Schreibens gesehen hat.
Tipp aus der Praxis
WYSIWYG-Editoren erzeugen im Hintergrund HTML-Code, der nicht immer sauber ist. Besonders problematisch ist das direkte Einfügen von Text aus Microsoft Word oder Google Docs: Diese Dokumente enthalten proprietäre Inline-Styles und überflüssige Tags, die das Layout einer Website empfindlich stören können. Verwenden Sie daher stets die Option „Als normalen Text einfügen“ (Tastenkombination Strg+Umschalt+V in den meisten Betriebssystemen) oder die entsprechende Schaltfläche im Classic Editor, bevor Sie externen Text weiterformatieren. Andernfalls schleichen sich unsichtbare Formatierungsreste ein, die später nur durch direktes Bearbeiten des HTML-Quellcodes zu bereinigen sind.