HTMLElement: editContext プロパティ

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/ja/web/api/editcontext_api/index.md)

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

editContext は HTMLElement インターフェイスのプロパティで、要素に関連付けられた EditContext オブジェクトを取得したり設定したりします。

EditContext API を使用することで、インプットメソッドエディター (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 インスタンスは、関連する要素が DOM から除去されても、他の参照する要素があれば、その関連する要素を維持し続けます。

要素が確実にガベージコレクションされるようにしたい場合は、要素の editContext プロパティをクリアして下さい。

値

EditContext オブジェクトまたは null です。

例

要素の `editContext` プロパティの設定

この例では、要素を編集可能にするために <canvas> 要素の editContext プロパティを新しい EditContext インスタンスに設定する方法を示します。

html

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

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

要素の `editContext` プロパティのクリア

この例では、DOM から要素を安全に除去するために、編集可能な <canvas> 要素の editContext プロパティをクリアする方法を示します。

html

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

// EditContext を作成して canvas 要素に関連付ける
const canvas = document.getElementById("editor-canvas");
const editContext = new EditContext();
canvas.editContext = editContext;

// そのあとで editContext プロパティをクリアし、要素を除去する
canvas.editContext = null;
canvas.remove();

仕様書

Specification
EditContext API # dom-htmlelement-editcontext

ブラウザーの互換性

BCD tables only load in the browser