HTMLElement: editContext-Eigenschaft

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die editContext-Eigenschaft des HTMLElement-Interfaces erhält und setzt das einem Element zugeordnete EditContext-Objekt.

Die EditContext API kann genutzt werden, um Rich-Text-Editoren im Web zu erstellen, die erweiterte Textein- und -ausgabemöglichkeiten unterstützen, wie zum Beispiel die Nutzung eines Input Method Editor (IME) für die Komposition, Emoji-Auswahl oder jede andere plattformspezifische, bearbeitungsbezogene Benutzeroberfläche.

Mögliche Elemente

Das Setzen der editContext-Eigenschaft funktioniert nur bei bestimmten Typen von Elementen:

Eines dieser HTML-Elemente: <article>, <aside>, <blockquote>, <body>, <div>, <footer>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <main>, <nav>, <p>, <section>, oder <span>.
Ein gültiges Custom Element.
Ein <canvas>-Element.

Wenn Sie versuchen, die editContext-Eigenschaft auf ein anderes als die oben genannten Elemente zu setzen, wird ein NotSupportedError DOMException ausgelöst.

Elementzuordnung

Das Setzen der editContext-Eigenschaft eines Elements auf eine EditContext-Instanz ordnet diesem Element die EditContext-Instanz zu.

Die Zuordnung ist eins-zu-eins:

Ein Element kann nur mit einer EditContext-Instanz verknüpft sein.
Eine EditContext-Instanz kann nur mit einem Element verknüpft sein.

Wenn Sie versuchen, eine bereits zugeordnete EditContext-Instanz einem anderen Element zuzuordnen, wird eine DOMException ausgelöst.

Wenn Sie versuchen, eine andere EditContext-Instanz zu einem bereits zugeordneten Element hinzuzufügen, wird ebenfalls eine DOMException ausgelöst.

Um zu überprüfen, ob ein Element bereits mit einer EditContext-Instanz verknüpft ist, verwenden Sie die Methode EditContext.attachedElements().

<canvas id="editor-canvas"></canvas>

const canvas = document.getElementById("editor-canvas");
const editContext = new EditContext();
canvas.editContext = editContext;

Löschen der `editContext`-Eigenschaft eines Elements

Dieses Beispiel zeigt, wie man die editContext-Eigenschaft eines bearbeitbaren <canvas>-Elements löscht, um das Element sicher aus dem DOM zu entfernen.

html

<canvas id="editor-canvas"></canvas>

// Create the EditContext and associate it with the canvas element.
const canvas = document.getElementById("editor-canvas");
const editContext = new EditContext();
canvas.editContext = editContext;

// Later, clear the editContext property, and remove the element.
canvas.editContext = null;
canvas.remove();