EditContext API

概念

在應用程式的可編輯區域中輸入文字時，會涉及多個參與者。

使用者

使用者透過輸入法提供文字：鍵盤、滑鼠、語音或其他輸入法。

輸入法軟體

輸入法軟體將使用者的輸入轉換為文字。例如，這可能是一個 輸入法編輯器 (IME)，它將標準鍵盤的擊鍵轉換為日語、中文或韓語字元。

作業系統文字輸入服務

作業系統的文字輸入服務充當輸入法軟體和應用程式之間的連結。

應用程式文字編輯上下文

應用程式文字編輯上下文提供了正在編輯的文字的狀態。該狀態包含文字本身、當前選定範圍、文字在應用程式 UI 中的位置等資訊。

應用程式可編輯區域

應用程式可編輯區域是應用程式中顯示文字的 UI 元素。

雖然前三個參與者由作業系統提供，但應用程式負責提供可編輯區域和文字編輯上下文。

在 Web 上，可編輯區域通常是 <textarea> 元素、<input> 元素，或將 contenteditable 屬性設定為 true 的元素。對於這些元素，瀏覽器會自動提供文字編輯上下文，Web 作者無需編寫任何程式碼來支援文字輸入。

建立自定義可編輯區域

Web 作者還可以使用 EditContext API 建立自定義可編輯區域。例如，Web 作者可以使用 <canvas> 元素來渲染文字，從而建立一個富文字編輯器。在這種情況下，Web 作者需要編寫程式碼來支援文字輸入。

作者的職責

如果您決定實現自己的可編輯區域，無論是將文字繪製到 <canvas> 中還是將其渲染到一系列 DOM 元素中，您都將負責提供通常情況下如果使用 <textarea> 而不是自定義區域，瀏覽器會為您提供的功能。這包括：

• 渲染文字。
• 渲染選定範圍（如果您使用 DOM 元素而不是 <canvas> 來構建可編輯區域，則瀏覽器會為您渲染選定範圍）。
• 在選定範圍更改時通知作業系統文字輸入服務。
• 告知作業系統文字輸入服務文字在 UI 中的位置，以便輸入法軟體可以在正確的位置顯示 IME 組合視窗。
• 在使用者在 IME 組合視窗中組合文字時應用某些文字格式。

作為回報，EditContext API 會使您選擇的 DOM 元素成為可編輯的，並將其納入文件的焦點順序。此外，EditContext API 還提供有關正在編輯的文字狀態的資訊，這允許您以自定義方式渲染它。提供給您的資訊包括：

• 當前文字內容。
• 當前選定範圍。
• IME 組合是否正在進行，以及是否需要應用文字格式。

無障礙

如果您將 EditContext API 與 <canvas> 元素一起使用，請確保文字也對輔助技術可訪問。螢幕閱讀器無法讀取 <canvas> 元素中的文字。例如，您可以維護一個位於螢幕外 DOM 元素中的文字的單獨檢視，該檢視會呈現給螢幕閱讀器。

基本用法

要使用 EditContext API，您需要建立一個 EditContext 介面的例項，然後使用 editContext 屬性將其附加到您想要使其可編輯的 DOM 元素上。DOM 元素可以是任何元素，包括 <div> 或 <canvas> 元素。

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

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

一個 EditContext 例項一次只能附加到一個 DOM 元素。

將 EditContext 例項附加到 DOM 元素會使其成為可聚焦的，併成為文件焦點順序的一部分。使用者可以使用他們選擇的輸入法向該元素輸入文字，您可以使用 EditContext 例項觸發的事件來渲染文字和選定範圍。

模型和檢視架構

使用 EditContext API 時，將其編輯體驗構建為模型和檢視架構會有所幫助。

EditContext 例項代表您可編輯區域的模型。當接收到文字輸入或選定範圍更改時，其內部狀態會更新。

然後，您可以使用 EditContext 例項提供的資訊在檢視中渲染文字和選定範圍，但您的檢視不需要與模型完全匹配。您可以自由地以任何您想要的方式渲染文字。

介面

EditContext 實驗性

EditContext 介面是對文字編輯上下文的 JavaScript 反射，該上下文在使​​用 textarea 等標準可編輯區域時通常由瀏覽器透明地提供。EditContext 提供了正在編輯的文字的狀態，其中包含文字本身、當前選定範圍或文字在應用程式 UI 中的位置等資訊。

TextFormat 實驗性

當用戶在 IME 組合視窗中組合文字時，TextFormat 介面用於表示應應用於文字範圍的特定格式。

TextUpdateEvent 實驗性

TextUpdateEvent 介面是一個 DOM 事件，表示附加到 EditContext 例項的可編輯文字區域中的文字或選定範圍的更新。

TextFormatUpdateEvent 實驗性

TextFormatUpdateEvent 介面是一個 DOM 事件，表示一個 輸入法編輯器 (IME) 視窗希望應用於附加到 EditContext 例項的可編輯區域中正在組合的文字的文字格式列表。

CharacterBoundsUpdateEvent 實驗性

CharacterBoundsUpdateEvent 介面是一個 DOM 事件，表示來自作業系統的請求，要求瞭解附加到 EditContext 例項的可編輯區域中特定字元的邊界。

其他介面的擴充套件

HTMLElement.editContext 實驗性

HTMLElement 介面的 editContext 屬性獲取和設定元素的關聯 EditContext 物件。

規範

瀏覽器相容性

另見

• 使用 EditContext API