EditContext API：富文本编辑与 IME 协作

---

title: EditContext API：富文本编辑与 IME 协作

keywords:

• EditContext
• IME
• 文本编辑
• selection
• composition

description: 使用 EditContext 为自定义编辑器实现与 IME 的深度协作，管理选择与合成，提升复杂文本输入体验，含兼容与回退策略。

categories:

• 应用软件
• 输入法

---

概述

EditContext 为自定义可编辑控件提供低级接口，处理选区、文本与合成事件，改善与 IME 的协作。适用于画布编辑器与富文本组件。

用法/示例

const ec = new EditContext()
ec.updateSelection(0, 0)
ec.addEventListener('textupdate', e => {
  // e.text, e.selectionStart, e.selectionEnd
})

工程建议

• 在不支持环境回退到 contenteditable 与原生输入控件；使用 beforeinput/IME 事件协作。
• 管理选区与撤销栈，记录操作用于可访问性与恢复。
• 对复杂脚本与方向性文本进行专项测试，保证正确性。

参考与验证

• Chrome Docs：EditContext — https://developer.chrome.com/docs/web-platform/edit-context
• WICG：EditContext — https://github.com/WICG/edit-context