EditContext.text — Eigenschaft · JavaScript-Referenz

Signatur

get EditContext.text

Beschreibung

Die Eigenschaft EditContext.text enthält den vollständigen Text, den ein EditContext-Objekt verwaltet. Mit der EditContext-API baust du eigene Editoren, etwa auf Basis eines <canvas> oder eines selbst gerenderten <div>. Das Textmodell kommt dabei vom Browser, einschließlich Eingabemethoden (IME), Komposition und Autokorrektur. text ist die einzige verlässliche Quelle für den aktuellen Inhalt. Wie der Text dargestellt wird, entscheidest du selbst.

Tippt der Benutzer in ein Element mit zugewiesenem editContext, aktualisiert der Browser text automatisch, und zwar bevor das Ereignis textupdate ausgelöst wird. Im Handler kannst du deshalb direkt editContext.text lesen und neu zeichnen.

Die Eigenschaft ist schreibgeschützt. Den Anfangswert übergibst du im Konstruktor über new EditContext({ text: "..." }). Soll der Text im Code geändert werden (etwa beim Einfügen aus der Zwischenablage, bei Rückgängig/Wiederholen oder beim Löschen mit der Rücktaste in eigenen Tastatur-Handlern), rufst du updateText(rangeStart, rangeEnd, text) auf.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Textinhalt des EditContext. Ist beim Erstellen kein Text angegeben, ist es ein leerer String "".

Beispiele

EditContext erzeugen und Anfangstext lesen

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

console.log(editContext.text);
console.log(editContext.text.length);

Hallo Welt 10

Canvas-Editor bei jeder Eingabe neu zeichnen

const canvas = document.querySelector("#editor");
const ctx = canvas.getContext("2d");
const editContext = new EditContext();
canvas.editContext = editContext;

const render = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.font = "20px sans-serif";
  ctx.fillText(editContext.text, 10, 30);
};

// text ist hier bereits aktualisiert
editContext.addEventListener("textupdate", (event) => {
  console.log(`Eingefügt: "${event.text}" – Gesamt: "${editContext.text}"`);
  render();
});

canvas.focus();

Eingefügt: "a" – Gesamt: "a"

Text über updateText() ändern (Rücktaste)

const div = document.querySelector("#custom-editor");
const editContext = new EditContext({ text: "Beispiel" });
div.editContext = editContext;

div.addEventListener("keydown", (event) => {
  if (event.key !== "Backspace") return;
  event.preventDefault();
  const { selectionStart: start, selectionEnd: end } = editContext;
  const from = start === end ? Math.max(0, start - 1) : start;
  // editContext.text = ... funktioniert nicht, daher updateText()
  editContext.updateText(from, end, "");
  editContext.updateSelection(from, from);
  div.textContent = editContext.text;
});

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie editContext.text = "x" wird ohne Fehlermeldung ignoriert (im Strict Mode gibt es einen TypeError). Ändere den Text stattdessen mit updateText().
Rufst du updateText() auf, wird kein textupdate-Ereignis ausgelöst. Die Neudarstellung musst du dann selbst anstoßen.
Der Browser fügt text nicht automatisch ins DOM ein. Die Anzeige, etwa über textContent oder das Zeichnen im Canvas, bleibt deine Aufgabe. Den String nicht per innerHTML ausgeben, sonst droht XSS.
Positionen wie selectionStart und updateRangeStart zählen in UTF-16-Codeeinheiten. Emojis und andere Zeichen außerhalb der BMP belegen zwei Einheiten.
Kompatibilität: Die API ist experimentell und bisher nur in Chromium-Browsern verfügbar (Chrome/Edge ab 121). Prüfe die Unterstützung mit if ("EditContext" in window) und sieh eine Ausweichlösung vor, etwa contenteditable oder <textarea>.

Siehe auch

EditContext.characterBoundsRangeStart EditContext.selectionEnd EditContext.selectionStart VTTCue.text AudioContext.sinkId