HTMLElement: editContext property
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The editContext
property of the HTMLElement
interface gets and sets an element's associated EditContext
object.
The EditContext API can be used to build rich text editors on the web that support advanced text input experiences, such as Input Method Editor (IME) composition, emoji picker, or any other platform-specific editing-related UI surfaces.
Possible elements
Setting the editContext
property only works on certain types of elements:
- One of these HTML elements:
<article>
,<aside>
,<blockquote>
,<body>
,<div>
,<footer>
,<h1>
,<h2>
,<h3>
,<h4>
,<h5>
,<h6>
,<header>
,<main>
,<nav>
,<p>
,<section>
, or<span>
. - A valid custom element.
- A
<canvas>
element.
If you try to set the editContext
property on an element that is not one of the above, a NotSupportedError
DOMException
is thrown.
Element association
Setting the editContext
property of an element to a EditContext
instance associates that element with the EditContext
instance.
The association is one-to-one:
- An element can only be associated to one
EditContext
instance. - An
EditContext
instance can only be associated to one element.
If you try to associate an already associated EditContext
instance to a different element, a DOMException
is thrown.
If you try to associate an other EditContext
instance to an element that's already associated, a DOMException
is also thrown.
To check whether an element is associated with an EditContext
instance already, use the EditContext.attachedElements()
method.
Garbage collection
An EditContext
instance will keep its associated element alive if it has other live references, even if the associated element is removed from the DOM.
If you want to make sure the element is garbage collected, clear the editContext
property of the element.
Value
An EditContext
object or null
.
Examples
Setting an element's editContext
property
This example shows how to set the editContext
property of a <canvas>
element to a new EditContext
instance in order to make the element editable.
<canvas id="editor-canvas"></canvas>
const canvas = document.getElementById("editor-canvas");
const editContext = new EditContext();
canvas.editContext = editContext;
Clearing an element's editContext
property
This example shows how to clear the editContext
property of an editable <canvas>
element in order to safely remove the element from the DOM.
<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();
Specifications
Specification |
---|
EditContext API # dom-htmlelement-editcontext |
Browser compatibility
BCD tables only load in the browser
See also
- The
EditContext
interface.