HTMLElement : propriété editContext

Limited availability

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.

La propriété editContext de l'interface HTMLElement permet d'obtenir ou de définir l'objet EditContext associé à un élément.

L'API EditContext peut être utilisée pour créer des éditeurs de texte enrichi sur le web prenant en charge des expériences de saisie avancées, comme la composition avec un éditeur de méthode d'entrée (IME), le sélecteur d'émojis, ou toute autre interface de saisie spécifique à la plateforme.

Valeur

Un objet EditContext ou null.

Éléments possibles

La propriété editContext ne peut être définie que sur certains types d'éléments :

Un de ces éléments HTML : <article>, <aside>, <blockquote>, <body>, <div>, <footer>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <main>, <nav>, <p>, <section>, ou <span>.
Un élément personnalisé valide.
Un élément <canvas>.

Si vous essayez de définir la propriété editContext sur un élément qui n'est pas dans cette liste, une exception NotSupportedError DOMException est levée.

Association d'élément

Définir la propriété editContext d'un élément avec une instance de EditContext associe cet élément à cette instance.

L'association est exclusive :

Un élément ne peut être associé qu'à une seule instance de EditContext.
Une instance de EditContext ne peut être associée qu'à un seul élément.

Si vous essayez d'associer une instance de EditContext déjà associée à un autre élément, une exception DOMException est levée.

Si vous essayez d'associer une autre instance de EditContext à un élément déjà associé, une exception DOMException est également levée.

Pour vérifier si un élément est déjà associé à une instance de EditContext, utilisez la méthode EditContext.attachedElements().

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

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

Réinitialiser la propriété `editContext` d'un élément

Cet exemple montre comment réinitialiser la propriété editContext d'un élément <canvas> éditable afin de pouvoir retirer l'élément du DOM en toute sécurité.

html

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

// Créer l'EditContext et l'associer à l'élément canvas.
const canvas = document.getElementById("editor-canvas");
const editContext = new EditContext();
canvas.editContext = editContext;

// Plus tard, réinitialiser la propriété editContext et retirer l'élément.
canvas.editContext = null;
canvas.remove();