HTMLElement: editContext 属性
HTMLElement 接口的 editContext 属性用于获取和设置元素关联的 EditContext 对象。
EditContext API 可用于在 Web 上构建富文本编辑器，支持高级文本输入体验，例如 输入法编辑器 (IME) 组合、表情符号选择器或任何其他平台特定的编辑相关 UI 界面。
可能的元素
设置 editContext 属性仅在特定类型的元素上有效
- 以下 HTML 元素之一：
<article>,<aside>,<blockquote>,<body>,<div>,<footer>,<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<header>,<main>,<nav>,<p>,<section>, 或<span>。 - 一个有效的 自定义元素。
- 一个
<canvas>元素。
如果您尝试在非上述元素上设置 editContext 属性，则会抛出 NotSupportedError DOMException。
元素关联
将元素的 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 |
浏览器兼容性
加载中…
另见
EditContext接口。