jquery.app
Deutsch
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML- & Barrierefreiheits-Tools

Kostenlose contenteditable=plaintext-only Generator

Generieren Sie barrierefreies HTML-Markup mit contenteditable=plaintext-only fur reine Texteingabe ohne Rich-Text-Formatierung.

Tool wird geladen...

Was ist contenteditable=plaintext-only Generator?

Das Attribut contenteditable=plaintext-only erzeugt ein HTML-Element, das Benutzer bearbeiten können. Anders als contenteditable=true, das Rich-Text-Formatierung (fett, kursiv, Farben, Schriftarten) akzeptiert, entfernt plaintext-only beim Einfügen sämtliche Formatierung. Wenn ein Benutzer formatierten Text aus Word, Google Docs oder einer Webseite kopiert und in einen plaintext-only-Editor einfügt, wird der Inhalt als reiner Text ohne HTML-Tags, Inline-Styles oder Schriftformatierung eingefügt. Dieses Verhalten ist im Browser eingebaut und benötigt null JavaScript.

Kurze Antwort

Verwenden Sie contenteditable=plaintext-only, um bearbeitbare Bereiche zu erstellen, die nur reinen Text akzeptieren - beim Einfügen von formatiertem Inhalt werden alle HTML-Tags und Inline-Styles automatisch entfernt. Kein JavaScript nötig. Unterstützt in Chrome 120+, Edge 120+, Safari 17.4+ und Firefox 136+. Degradiert elegant zu Rich-Text-Bearbeitung in älteren Browsern. Das generierte HTML enthält Platzhalter-CSS, Fokus-Stile, ARIA-Attribute und optionale Fallback-Erkennung.

Last updated: 2026-06-01

Einschränkungen

  • Nicht unterstützt in Firefox vor Version 136. Das Attribut degradiert elegant zu contenteditable=true, sodass Benutzer älterer Firefox-Versionen einen Rich-Text-Editor anstelle eines Klartext-Editors sehen. Fügen Sie einen JavaScript-Paste-Interceptor als Sicherheitsnetz für diese Benutzer hinzu.
  • plaintext-only ist ein Alles-oder-Nichts-Ansatz - es unterstützt nicht das Erlauben einiger Formatierungen (wie Zeilenumbrüche) während andere blockiert werden (wie fett oder Schriftarten). Für selektive Filterung benötigen Sie eine benutzerdefinierte Lösung mit dem beforeinput-Event.
  • Browser-Implementierungen können sich in Randfällen unterscheiden - zum Beispiel wie nachgestellte Leerzeichen, mehrere Leerzeichen oder ungewöhnliche Unicode-Zeichen beim Einfügen behandelt werden. Testen Sie mit den Inhaltstypen, die Ihre Benutzer am wahrscheinlichsten einfügen.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

So nutzt du dieses Tool

  1. Wählen Sie den Editor-Modus: plaintext-only (entfernt alle Formatierungen beim Einfügen) oder normales contenteditable (behält Rich-Text). Generieren Sie HTML für einen oder beide Modi mit einem Side-by-Side-Vergleich.
  2. Konfigurieren Sie den Platzhaltertext, der erscheint, wenn der Editor leer ist, und passen Sie die Platzhalter-CSS-Farbe und das Styling an Ihr Design an.
  3. Legen Sie Fokus-Stile fest: Umriss, Rahmenfarbe oder Box-Shadow, die aktiviert werden, wenn der Editor den Fokus erhält. Fügen Sie ARIA-Labels für Screenreader-Barrierefreiheit hinzu.
  4. Kopieren Sie das generierte HTML-Markup. Das Tool bietet ein vollständiges, in sich geschlossenes Snippet mit zugehörigem CSS, das die Fallback-Erkennung für Browser ohne plaintext-only-Unterstützung übernimmt.

Wofür du es nutzen kannst

  • Kommentarfelder und Diskussionsforen, in denen Benutzer keinen formatierten Text einfügen können sollen, der das Seitenlayout beschädigt oder verstecktes HTML einführt.
  • Code-Snippet-Eingaben oder Konfigurationseditoren, in denen Rohtext erwartet wird und Rich-Formatierung unerwünschtes Rauschen darstellt.
  • Interne Notiz-Tools oder CMS-Klartext-Beschreibungen, bei denen Formatierung Komplexität ohne Nutzen hinzufügt.

Anwendungsfalle

Praxisbeispiele

Beispiel

Blog-Kommentar-Klartextfeld

Ein Blog möchte verhindern, dass Kommentatoren formatierten Text mit versteckten HTML-Tags einfügen, die das Layout beschädigen oder XSS-Vektoren einführen könnten. Verwenden Sie contenteditable=plaintext-only für die Kommentareingabe. Wenn ein Benutzer einen formatierten Absatz aus Word kopiert und einfügt, entfernt der Browser automatisch alle fett, kursiv, Schrift- und Farb-Tags - das Ergebnis ist sauberer Klartext.

Beispiel

Konfigurationseditor-Vergleich

Ein Entwicklerwerkzeug benötigt zwei Eingabemodi: einen WYSIWYG-Editor für reichhaltige Beschreibungen (contenteditable=true) und ein Klartextfeld für Konfigurationswerte (contenteditable=plaintext-only). Verwenden Sie das generierte HTML, um beide Modi nebeneinander anzuzeigen, damit Benutzer den Unterschied sofort verstehen.

Haufige Fehler

  • contenteditable=true für Klartextfelder zu verwenden und JavaScript-Paste-Interceptors zu schreiben, um Formatierung zu entfernen - der Browser erledigt dies mit plaintext-only automatisch und spart Code, Wartung und Edge-Case-Fehler.
  • Zu vergessen, ARIA-Attribute und zugängliche Labels zu contenteditable-Bereichen hinzuzufügen - Screenreader behandeln bearbeitbare Elemente als Formularsteuerelemente und benötigen eine korrekte Kennzeichnung über aria-label oder aria-labelledby.
  • Das Fallback-Verhalten in älteren Browsern nicht zu testen - Firefox hat plaintext-only in Version 136 hinzugefügt. Ohne Fallback erhalten Benutzer älterer Versionen stattdessen einen normalen Rich-Text-Editor.

Überprüfung

  1. Öffnen Sie das generierte HTML in Chrome oder Safari. Geben Sie etwas Text ein, kopieren Sie dann einen formatierten Absatz aus einer Webseite oder einem Word-Dokument und fügen Sie ihn in den Editor ein. Überprüfen Sie, dass alle Formatierungen (fett, kursiv, Farben, Schriftarten, Links) entfernt wurden und nur Klartext übrig bleibt.
  2. Testen Sie denselben Einfügevorgang in Firefox 135 oder früher, um das Fallback-Verhalten zu bestätigen - der Editor sollte als contenteditable=true funktionieren (Formatierung beibehalten), da plaintext-only nicht unterstützt wird.

FAQ

Fragen zu contenteditable=plaintext-only Generator

Wie unterscheidet sich contenteditable plaintext-only von contenteditable true?

contenteditable=true erlaubt Benutzern das Bearbeiten von HTML-Inhalten und das Einfügen von formatiertem Text unter Beibehaltung von fett, kursiv, Listen, Links und Inline-Styles. contenteditable=plaintext-only entfernt beim Einfügen alle Formatierungen, einschließlich HTML-Tags, Inline-Styles und Rich-Text aus Word oder Webseiten. Das zugrundeliegende Bearbeitungsverhalten ist identisch - nur die Einfügeverarbeitung unterscheidet sich. plaintext-only verhält sich, als ob ein JavaScript-Paste-Interceptor jedes Mal document.execCommand('insertText') ausgeführt hätte, aber ohne Code.

Welche Browser unterstützen contenteditable=plaintext-only?

Stand 2026 ist plaintext-only Baseline 2025, unterstützt in Chrome 120+, Edge 120+, Safari 17.4+ und Firefox 136+. Dies deckt etwa 85% der globalen Browser-Nutzung ab. In älteren Browsern degradiert das Attribut elegant zu contenteditable=true (Rich-Text). Das generierte HTML enthält eine Fallback-Erkennung, sodass Sie einen JavaScript-Paste-Interceptor als Sicherheitsnetz für ältere Browser hinzufügen können.

Kann ich mit plaintext-only einige Formatierungen erlauben und andere blockieren?

Nein - plaintext-only ist ein Alles-oder-Nichts-Verhalten. Wenn Sie selektive Filterung benötigen (z.B. Zeilenumbrüche erlauben, aber Schrift-Tags blockieren), müssen Sie einen benutzerdefinierten Paste-Handler mit dem beforeinput-Event oder eine Bibliothek wie Quill oder TipTap schreiben, die konfigurierbare Paste-Bereinigung bietet. plaintext-only ist für Fälle gedacht, in denen Sie keine Formatierung wünschen, nicht für benutzerdefinierte Filterung.

Verhindert contenteditable plaintext-only XSS?

Es reduziert einen XSS-Vektor: eingefügtes HTML, das Script-Tags, Event-Handler oder anderen schädlichen Markup enthält, wird zu Klartext reduziert, sodass diese Tags nie ins DOM gelangen. contenteditable-Bereiche sind jedoch weiterhin bearbeitbare HTML-Elemente und können von anderen Angriffsvektoren angegriffen werden. Validieren und bereinigen Sie Inhalte immer serverseitig vor dem Speichern oder Anzeigen, unabhängig vom contenteditable-Modus.

Verwandte Tools

Weitere html- & barrierefreiheits-tools

Auch ausprobieren

Auch ausprobieren

CSS- & Design-Tools

CSS-Karussell-Generator

Erstellen Sie natives CSS-Karussell-Markup mit Scroll-Snap, Scroll-Schaltflächen, Scroll-Markierungen und zugänglicher Listenstruktur. Kein JavaScript erforderlich.

Tool öffnen

CSS- & Design-Tools

CSS-Scroll-State-Query-Generator

Erstellen Sie CSS-scroll-state()-Container-Queries für eingerastete, fixierte oder scrollbare Elemente. Enthält einen JavaScript-Fallback für browserübergreifende Unterstützung.

Tool öffnen