HTMLElement：editContext 属性

可用性有限

此功能不是基线功能，因为它在一些最常用的浏览器中无法正常工作。

实验性： 这是一个实验性技术
在生产环境中使用此功能之前，请仔细查看浏览器兼容性表。

editContext是HTMLElement接口的一个属性，用于获取和设置元素关联的EditContext对象。

EditContext API可用于在 Web 上构建富文本编辑器，这些编辑器支持高级文本输入体验，例如输入法编辑器(IME)组合、表情符号选择器或任何其他与平台相关的编辑相关 UI 表面。

可能的元素

设置editContext属性仅适用于某些类型的元素

如果你尝试在不是上述元素之一的元素上设置editContext属性，则会抛出一个NotSupportedErrorDOMException。

元素关联

将元素的editContext属性设置为EditContext实例会将该元素与EditContext实例关联。

关联是一对一的

  • 一个元素只能与一个EditContext实例关联。
  • 一个EditContext实例只能与一个元素关联。

如果你尝试将一个已经关联的EditContext实例关联到另一个元素，则会抛出一个DOMException。

如果你尝试将另一个EditContext实例关联到一个已经关联的元素，则也会抛出一个DOMException。

要检查元素是否已与EditContext实例关联，请使用EditContext.attachedElements()方法。

垃圾回收

如果EditContext实例还有其他活动引用，即使关联的元素已从 DOM 中移除，它也会使关联的元素保持活动状态。

如果你想确保元素被垃圾回收，请清除元素的editContext属性。

值

一个EditContext对象或null。

示例

设置元素的editContext属性

此示例演示如何将<canvas>元素的editContext属性设置为一个新的EditContext实例，以便使元素可编辑。

html
<canvas id="editor-canvas"></canvas>
js
const canvas = document.getElementById("editor-canvas");
const editContext = new EditContext();
canvas.editContext = editContext;

清除元素的editContext属性

此示例演示如何清除可编辑<canvas>元素的editContext属性，以便安全地将元素从 DOM 中移除。

html
<canvas id="editor-canvas"></canvas>
js
// 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();

规范

规范
EditContext API
# dom-htmlelement-editcontext

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

另请参阅