WYSIWYG Editor

WYSIWYG ist ein Akronym und steht für den englischen Ausdruck „What you see is what you get“. Übersetzt bedeutet das: „Was du siehst, ist das, was du bekommst.“

Bei dem Textbearbeitungsprogramm Microsoft Word handelt es sich beispielsweise um solch einen WYSIWYG Editor. So, wie Sie in Microsoft Word Ihren Text eingeben, inkl. Schriftart, Schriftgröße, Absätze usw., gibt auch Ihr Drucker das Dokument aus.

WYSIWYG Editor bei der Webseitengestaltung

WYSIWYG Editoren kommen in nahezu allen Content Management Systemen zum Einsatz. Sie bieten vor allem für Laien den Vorteil, dass keine Programmierkenntnisse nötig sind, um Inhalte auf einer Website zu bearbeiten. Laien können auch ohne HTML- und CSS-Kenntnisse bestimmen, wie der ausgegebene Text aussehen soll, beispielsweise welche Schriftgröße er haben soll, welche Farbe usw.

Die Formatierung des Textes wird von einem WYSIWYG Editor dann automatisch in HTML und CSS konvertiert. Davon bekommt der Anwender in der Regel nichts mit.

Bei dem WordPress Plugin „Visual Composer“ kann dies allerdings super veranschaulicht werden. Der WYSIWYG Editor bietet hier zwei Reiter zur Auswahl – „Visuell“ und „Text“.

WYSIWYG Editor WordPress

Beim visuellen Modus handelt es sich um den WYSIWYG Editor. So, wie wir hier den Text formatieren, wird er letztendlich auch für den Besucher der Website im Frontend angezeigt.

Klicken wir auf den Reiter „Text“, sehen wir, wie unsere Eingabe automatisch vom System in HTML und CSS Code umgewandelt wurde. Ohne diese Umwandlung wäre das System nicht in der Lage, den Text überhaupt auszugeben. Auch bei Word wird der eingegebene Inhalt im Hintergrund automatisch entsprechend codiert.

WYSIWYG Editor HTML

Welche Formatierungen kann man mit einem WYSIWYG Editor vornehmen?

Der Funktionsumfang einzelner WYSIWYG Editoren kann sich zum Teil unterscheiden. In der Regel lassen sich jedoch mit allen WYSIWYG Editoren folgende Formatierungen vornehmen:

  • Schriftgröße
  • Schriftart
  • Schriftfarbe
  • Ausrichtung des Textes (links, rechts, zentriert)
  • kursiv, fett, unterstrichen usw.
  • Einfügen von Aufzählungszeichen / nummerierten Listen
  • Einfügen von Bildern
  • Verlinkung des Textes bzw. einzelner Wörter

Nachteile eines WYSIWYG Editors

Neben den zahlreichen Vorteilen, vor allem für Anfänger, hat ein WYSIWYG aber auch einen entscheidenden Nachteil. Dadurch, dass das System selbst den eingegebenen Text formatiert, haben wir nicht die Kontrolle darüber, wie er das tut.

Jeder war bestimmt schon einmal am Rande der Verzweiflung, weil er in Word oder ähnlichen Programmen einen Text auf eine bestimmte Weise anzeigen lassen wollte, das Programm aber eigenständig unerwünschte Formatierungen unternommen hat. So hat sich bestimmt auch jeder schon einmal durch das gesamte Menü des Textprogramms geklickt und sämtliche Einstellungen getätigt, bis der Text endlich wie gewünscht dargestellt wurde.

Hinzu kommt ein internetspezifisches Problem: Auch bei WYSIWYG ist nicht zwangsläufig gegeben, dass das Ergebnis wirklich so aussieht, wie es dem Webdesigner auf dem Monitor angezeigt wird. Verschiedene Systeme und unterschiedliche Browser geben Inhalte mitunter anders aus, hinzu kommen mobile Endgeräte, die wieder andere Darstellungsarten haben. Deshalb wird das Versprechen „What you see is what you get“ zumindest in Bezug auf Websites nicht immer erfüllt.

Man kann zudem nicht immer davon ausgehen, dass der vom WYSIWYG Editor automatisch generierte Programmcode auch unter professionellen Aspekten sinnvoll ist. In der Vergangenheit haben Webdesigner immer wieder kritisiert, dass diese Programme Quellcode produzieren, der unnötig aufgeblasen oder fehlerhaft ist. Dies führe zu langen Ladezeiten und Fehlanzeigen.