HTMLElement: thuộc tính editContext

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.

Thuộc tính editContext của giao diện HTMLElement lấy và đặt đối tượng EditContext liên kết với phần tử.

EditContext API có thể được dùng để xây dựng các trình soạn thảo văn bản phong phú trên web, hỗ trợ các trải nghiệm nhập văn bản nâng cao như soạn thảo bằng Input Method Editor (IME), bộ chọn emoji, hoặc bất kỳ giao diện người dùng liên quan đến chỉnh sửa nào khác dành riêng cho nền tảng.

Giá trị

Một đối tượng EditContext hoặc null.

Các phần tử có thể dùng

Đặt thuộc tính editContext chỉ hoạt động trên một số loại phần tử nhất định:

Một trong các phần tử HTML sau: <article>, <aside>, <blockquote>, <body>, <div>, <footer>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <main>, <nav>, <p>, <section>, hoặc <span>.
Một phần tử tùy chỉnh hợp lệ.
Một phần tử <canvas>.

Nếu bạn cố đặt thuộc tính editContext trên một phần tử không thuộc các loại trên, sẽ có một DOMException NotSupportedError được ném ra.

Liên kết phần tử

Đặt thuộc tính editContext của một phần tử thành một đối tượng EditContext sẽ liên kết phần tử đó với đối tượng EditContext.

Mối liên kết là một-một:

Một phần tử chỉ có thể liên kết với một đối tượng EditContext.
Một đối tượng EditContext chỉ có thể liên kết với một phần tử.

Nếu bạn cố liên kết một đối tượng EditContext đã liên kết với một phần tử khác, sẽ có DOMException được ném ra.

Nếu bạn cố liên kết một đối tượng EditContext khác với một phần tử đã liên kết, cũng sẽ có DOMException được ném ra.

Để kiểm tra xem một phần tử đã liên kết với đối tượng EditContext hay chưa, hãy dùng phương thức EditContext.attachedElements().

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

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

Xóa thuộc tính `editContext` của phần tử

Ví dụ này cho thấy cách xóa thuộc tính editContext của một phần tử <canvas> có thể chỉnh sửa để xóa phần tử khỏi DOM một cách an toàn.

html

<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();