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介面。