Was ist ein WYSIWYG-Editor?

WYSIWYG steht für „What You See Is What You Get“ („Was du siehst, ist das, was du erhältst“). Dabei handelt es sich um einen Editor, mit dem du Text visuell formatieren kannst – wenn du auf „Fett“ klickst, wird der Text sofort fett dargestellt, anstatt dass du Markup wie **bold** oder <strong> eingeben musst. So ermöglichen es die meisten Textverarbeitungsprogramme, E-Mail-Clients und Content-Management-Systeme, formatierte Inhalte zu erstellen, ohne HTML kennen zu müssen.

Toolbeschreibung

Der WYSIWYG-Editor ist ein Rich-Text-Editor auf Basis von Tiptap, der vollständig in deinem Browser ausgeführt wird. Formatiere Text über eine vertraute Symbolleiste – mit Überschriften, Fettdruck, Kursivschrift, Unterstreichungen, Listen, Blockzitaten, Codeblöcken, Links und Textausrichtung – und sieh das Ergebnis genau während der Eingabe, da der Editor selbst als Vorschau dient. Wechsle jederzeit zum HTML-Quelltext-Tab, um das generierte Markup zu überprüfen, zu bearbeiten, zu kopieren oder herunterzuladen und überall zu verwenden: in einem Blogbeitrag, einer E-Mail-Vorlage, einem CMS oder deiner eigenen Anwendung.

Funktionen

  • Umfangreiche Formatierungssymbolleiste - Überschriften (H1–H3), Fettdruck, Kursivschrift, Unterstreichung, Durchstreichung, Inline-Code und Formatierung löschen
  • Listen und Struktur - Aufzählungslisten, nummerierte Listen, Blockzitate, Codeblöcke und horizontale Trennlinien
  • Textausrichtung - Linksbündige, zentrierte, rechtsbündige und im Blocksatz ausgerichtete Absätze
  • Linkbearbeitung - Links einfügen, aktualisieren und entfernen, ohne den Editor zu verlassen
  • HTML-Quelltext-Tab - Zu einer Ansicht mit unverarbeitetem HTML wechseln, um das Markup zu überprüfen, zu bearbeiten, zu kopieren oder herunterzuladen
  • Zwei-Wege-Synchronisierung - HTML direkt bearbeiten und zurückwechseln, um die gerenderte Darstellung im Editor zu sehen
  • Wort- und Zeichenzähler - Die Inhaltslänge während der Eingabe verfolgen
  • Rückgängig/Wiederholen - Vollständiger Bearbeitungsverlauf mit einem Klick
  • Unterstützung für helle und dunkle Designs - Passt sich automatisch dem Design deiner Website an