Document.designMode — Eigenschaft · JavaScript-Referenz

Signatur

Document.designMode

Beschreibung

document.designMode ist eine lesbare und schreibbare Zeichenketten-Eigenschaft. Die gültigen Werte sind "on" und "off". Mit "on" wird das gesamte Dokument bearbeitbar: Nutzer können Text tippen, löschen, einfügen und formatieren, als wäre die Seite ein Textverarbeitungsfenster. Der Standardwert ist "off".

Früher war die Eigenschaft die Grundlage für WYSIWYG-Editoren in einem <iframe>. Man schaltet dazu das Dokument des iframes (iframe.contentDocument) in den Bearbeitungsmodus, damit der Editor vom Rest der Seite getrennt bleibt. Heute benutzt man für einzelne Bereiche meist das Attribut contenteditable. designMode eignet sich aber weiterhin für schnelle Prototypen, zum Testen von Texten und Layouts direkt im Browser und für iframe-basierte Editoren.

Beim Lesen gibt die Eigenschaft je nach Browser "on" oder "off" zurück. Beim Setzen ist die Groß- und Kleinschreibung egal. Andere Werte werden stillschweigend ignoriert. Wenn designMode aktiv ist, wirkt document.execCommand() auf die aktuelle Auswahl im Dokument.

Parameter

Name	Typ	Default	Beschreibung
$value	"on" \| "off"	"off"	Neuer Wert beim Setzen. `"on"` macht das Dokument bearbeitbar, `"off"` schaltet das wieder ab. Groß- und Kleinschreibung spielen keine Rolle.

Rückgabewert

Typ

string

Beschreibung

"on", wenn das Dokument bearbeitbar ist, sonst "off".

Beispiele

Ganze Seite umschalten (z. B. in der DevTools-Konsole)

// Seite bearbeitbar machen, um Texte direkt im Layout zu testen
document.designMode = 'on';
console.log(document.designMode);

// Wieder ausschalten
document.designMode = 'off';
console.log(document.designMode);

on off

Umschalt-Knopf für den Bearbeitungsmodus

const toggle = document.querySelector('#edit-toggle');

toggle.addEventListener('click', () => {
  const active = document.designMode === 'on';
  document.designMode = active ? 'off' : 'on';
  toggle.textContent = active ? 'Bearbeiten' : 'Fertig';
  console.log(`designMode: ${document.designMode}`);
});

designMode: on

Einfacher WYSIWYG-Editor in einem iframe

const iframe = document.createElement('iframe');
iframe.style.width = '100%';
iframe.style.height = '200px';
document.body.append(iframe);

const doc = iframe.contentDocument;
doc.open();
doc.write('<!doctype html><body><p>Hier tippen …</p></body>');
doc.close();
doc.designMode = 'on';

// Fett-Knopf: formatiert die Auswahl im iframe
document.querySelector('#bold').addEventListener('click', () => {
  doc.execCommand('bold');
  iframe.contentWindow.focus();
});

// Inhalt auslesen, z. B. zum Speichern
const getHtml = () => doc.body.innerHTML;
console.log(getHtml());

<p>Hier tippen …</p>

// Wichtig · Fallstricke

Nur für das eigene Dokument: designMode eines iframe-Dokuments lässt sich nur setzen, wenn es denselben Ursprung hat (Same-Origin-Policy). Bei fremden Ursprüngen ist contentDocument gleich null.
Zeitpunkt: Wenn man designMode vor dem Laden des iframes setzt, geht der Wert verloren, sobald das Dokument ersetzt wird. Deshalb erst nach dem load-Event oder nach document.close() setzen.
Sicherheit (XSS): Nutzer können beliebiges HTML einfügen, auch per Zwischenablage. Den Inhalt, den man über innerHTML ausliest, immer auf dem Server bereinigen, bevor er gespeichert oder anderen Nutzern angezeigt wird (z. B. mit DOMPurify). Zusätzlich hilft eine Content Security Policy.
execCommand ist veraltet: document.execCommand() gilt als veraltet (deprecated), und die Browser setzen es unterschiedlich um. Für ernsthafte Editoren nimmt man besser Bibliotheken wie ProseMirror, Lexical oder TipTap.
Ungültige Werte werden ohne Fehlermeldung ignoriert. Links und Formulare verhalten sich im Bearbeitungsmodus anders: Links werden zum Beispiel beim Klick nicht mehr geöffnet.
Die Eigenschaft wird von allen modernen Browsern unterstützt. Ältere Versionen des Internet Explorer gaben beim Lesen teilweise "inherit" zurück.

Siehe auch

MediaTrackSettings.facingMode Document.compatMode Document.body Document.defaultView Document.dir