EditContext API

当在应用程序的可编辑区域中输入文本时，会涉及多个参与者

用户

用户通过输入法提供文本：键盘、鼠标、语音或其他输入法。

输入法软件

输入法软件将用户的输入转换为文本。例如，这可能是将标准键盘上的击键转换为日语、中文或韩文字符的输入法编辑器 (IME)。

操作系统文本输入服务

操作系统的文本输入服务充当输入法软件和应用程序之间的桥梁。

应用程序文本编辑上下文

应用程序文本编辑上下文提供正在编辑的文本的状态。状态包含文本本身、当前选择、文本在应用程序 UI 中的位置等信息。

应用程序可编辑区域

应用程序可编辑区域是应用程序中显示文本的 UI 元素。

虽然前三个参与者由操作系统提供，但应用程序负责提供可编辑区域和文本编辑上下文。

在网络上，可编辑区域通常是<textarea> 元素、<input> 元素或将contenteditable 属性设置为true的元素。对于这些元素，浏览器会自动提供文本编辑上下文，网络作者无需编写任何代码来支持文本输入。

网络作者还可以使用 EditContext API 创建自定义可编辑区域。例如，网络作者可以使用<canvas> 元素渲染文本，从而创建一个富文本编辑器。在这种情况下，网络作者需要编写代码来支持文本输入。

如果你决定实现自己的可编辑区域，无论它是将文本绘制到<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 接口是通常由浏览器在使用标准可编辑区域（如textarea）时透明地提供的文本编辑上下文的 JavaScript 反射。EditContext 提供正在编辑的文本的状态，包括文本本身、当前选择或文本在应用程序 UI 中的位置等信息。

TextFormat

TextFormat 接口用于表示用户在 IME 组成窗口中撰写文本时应应用于文本范围的某些格式。

• 使用 EditContext API