new EditContext() — Methode · JavaScript-Referenz

Signatur

new EditContext(options)

Beschreibung

Der Konstruktor EditContext() legt ein neues EditContext-Objekt an. Es ist der Kern der EditContext API, mit der sich eigene, vollständig selbst gerenderte Texteditoren bauen lassen, etwa Code-Editoren, Canvas-basierte Editoren oder kollaborative Werkzeuge. Anders als bei contenteditable verändert der Browser das DOM nicht selbst. Er meldet Eingaben stattdessen über Events, und du entscheidest, wie der Text dargestellt wird.

Das erzeugte Objekt bewirkt zunächst nichts. Erst wenn du es der Eigenschaft editContext eines Elements zuweist (element.editContext = editContext), wird das Element fokussierbar und empfängt Tastatur- und IME-Eingaben. Dann feuert das Objekt Events wie textupdate, textformatupdate, characterboundsupdate, compositionstart und compositionend.

Über das optionale options-Objekt legst du den Anfangstext und die Anfangsauswahl fest. Das ist zum Beispiel nützlich, wenn ein Editor bereits gespeicherten Inhalt lädt. Später hältst du Text und Auswahl mit updateText() und updateSelection() synchron mit deinem eigenen Datenmodell.

Parameter

Name	Typ	Default	Beschreibung
$options	Object	{}	Optionales Objekt zur Initialisierung des Zustands.
$options.text	string	""	Anfangstext, den der `EditContext` verwaltet.
$options.selectionStart	number	0	Startposition der Auswahl bzw. Position des Cursors im Text (Index in UTF-16-Codeeinheiten).
$options.selectionEnd	number	0	Endposition der Auswahl. Ist der Wert gleich `selectionStart`, gibt es keine Auswahl, sondern nur einen Cursor.

Rückgabewert

Typ

EditContext

Beschreibung

Ein neues EditContext-Objekt. Es ist noch mit keinem Element verbunden.

Beispiele

EditContext erzeugen und an ein Element hängen

const editor = document.querySelector('#editor');

const editContext = new EditContext({
  text: 'Hallo Welt',
  selectionStart: 10,
  selectionEnd: 10
});

// Erst durch die Zuweisung wird das Element editierbar
editor.editContext = editContext;

console.log(editContext.text);
console.log(editContext.selectionStart, editContext.selectionEnd);

Hallo Welt 10 10

Minimaler eigener Editor mit textupdate

const editor = document.querySelector('#editor');
const editContext = new EditContext();
editor.editContext = editContext;

const render = () => {
  // Der Browser ändert das DOM nicht, darum selbst rendern
  editor.textContent = editContext.text;
};

editContext.addEventListener('textupdate', (event) => {
  console.log(`Eingabe: "${event.text}" (${event.updateRangeStart}–${event.updateRangeEnd})`);
  render();
});

editor.focus();

Eingabe: "a" (0–0) // nach Tippen von "a"

Feature-Erkennung mit Fallback auf contenteditable

const editor = document.querySelector('#editor');

if ('EditContext' in window) {
  const saved = localStorage.getItem('draft') ?? '';
  const ctx = new EditContext({
    text: saved,
    selectionStart: saved.length,
    selectionEnd: saved.length
  });
  editor.editContext = ctx;
  ctx.addEventListener('textupdate', () => {
    editor.textContent = ctx.text;
    localStorage.setItem('draft', ctx.text);
  });
  editor.textContent = ctx.text;
} else {
  // Fallback für Firefox/Safari
  editor.contentEditable = 'true';
}

// Wichtig · Fallstricke

Browser-Unterstützung: Bisher nur in Chromium-Browsern (Chrome und Edge ab Version 121). Firefox und Safari unterstützen die API nicht. Prüfe deshalb immer mit 'EditContext' in window, ob sie verfügbar ist, und sieh einen Fallback vor.
Nur bestimmte Elemente können einen EditContext erhalten: <canvas> und Elemente, die als Shadow-Host dienen können, zum Beispiel <div>, <span> oder <p>. Bei anderen Elementen wirft die Zuweisung einen NotSupportedError.
Ein EditContext kann immer nur an ein Element gleichzeitig gebunden sein. Ist er schon zugewiesen, schlägt eine zweite Zuweisung mit einem NotSupportedError fehl.
Der Browser rendert weder Text noch Cursor oder Auswahl. Das musst du selbst übernehmen. Damit IME-Fenster korrekt positioniert werden, melde die Geometrie mit updateControlBounds(), updateSelectionBounds() und updateCharacterBounds().
Die Indizes zählen UTF-16-Codeeinheiten. Bei Emojis und Zeichen außerhalb der BMP entsprechen sie nicht der Anzahl der sichtbaren Zeichen.
Ohne new aufgerufen wirft der Konstruktor einen TypeError.

Siehe auch

EditContext EditContext.prototype.updateText() EditContext.prototype.updateSelection() HTMLElement.editContext TextUpdateEvent new CSSStyleSheet()