Erstelle formatierten Text in einem Live-Editor und greife das generierte HTML ab, mit Formatierung, Listen, Links und Quelltextansicht.
Erstelle formatierten Text in einem Live-Editor und greife das generierte HTML ab, mit Formatierung, Listen, Links und Quelltextansicht. Erstelle formatierten Text in einem Live-Editor und greife das generierte HTML ab, mit Formatierung, Listen, Links und Quelltextansicht.
WYSIWYG steht für What You See Is What You Get (Was du siehst ist das, was du bekommst). Anstatt rohe HTML-Tags einzutippen, bearbeitest du ein Dokument visuell -- fett, kursiv, Überschriften, Listen, Links, und so weiter -- und der Editor übersetzt deine Aktionen in Markup für dich. Die Seite, die du ansiehst, nutzt die eingebaute contenteditable-Fähigkeit des Browsers plus die document.execCommand-API, die seit über einem Jahrzehnt in jedem großen Browser enthalten ist. Es ist keine Fremdbibliothek beteiligt: die Formatierung wird nativ vom Browser angewendet, sodass das generierte HTML exakt dem entspricht, was dein Browser für jeden anderen editierbaren Bereich im Web erzeugt.
Die Werkzeugleiste deckt die Operationen ab, die die meisten benötigen: Rückgängig/Wiederholen, fett, kursiv, unterstreichen, durchstreichen, Überschriften H1-H3, Absätze, Code-Blöcke, Aufzählungs- und Nummerierte Listen, Zitate, Links und Entfernen der gesamten Formatierung. Die Schrift- und Größenauswahl ändern die Schriftart und Schriftgröße der aktuellen Auswahl. Der Quelltext-Umschalter wechselt zwischen der gerenderten Ansicht und einem einfachen Textbereich mit dem rohen HTML, das du direkt bearbeiten kannst. Die Statusteileiste unter dem Editor zeigt die Zeichen- und Wortanzahl des aktuellen Inhalts.
Der Editor erzeugt nach Möglichkeit semantisches Markup statt darstellungslastigem Brei: Aus Überschriften werden <h1>/<h2>/<h3>, aus Listen werden <ul>/<ol>/<li>, aus Zitaten werden <blockquote>, und aus Code wird <pre>. Textformatierung wird mit <strong>, <em>, <u> und <del> angewendet. Da die execCommand des Browsers die Engine ist, kann das exakte Markup zwischen Browsern leicht variieren -- ein Klick auf fett erzeugt in einem Browser <strong> und in einem anderen <b>. Für maximale Kompatibilität ist das exportierte HTML bewusst minimal gehalten und kann ohne zusätzliche Bereinigung in E-Mails, CMS-Editoren oder Dokumentationssysteme eingefügt werden.
Kopiere das exportierte HTML aus dem Ausgabefeld, nachdem du zur Quelltextansicht gewechselt hast, oder verwende den Button „HTML kopieren". Wenn du in einen E-Mail-Client einfügst, halte das Markup einfach -- viele Clients entfernen <style> und komplexe Verschachtelung. Wenn du diesen Inhalt in eine Seite einbetten musst, die bereits eigene Stile hat, verwende semantische Tags und vermeide Inline-Stile; das exportierte Markup verwendet keine Inline-Stile, sodass es das CSS deiner Seite natürlich erbt. Alles auf dieser Seite läuft lokal in deinem Browser; der Inhalt verlässt die Seite nie.