Introducing a new way to build custom web editing experiences using the EditContext API  |  Blog  |  Chrome for Developers

文章《Introducing a new way to build custom web editing experiences using the EditContext API》介绍了新的 EditContext API，旨在帮助开发人员在其 web 应用程序中构建先进的编辑功能。尽管平台通过诸如 <input>、<textarea> 元素以及为元素应用 contenteditable 属性等提供了编辑能力，但是它们的基础能力往往难以满足开发者的高级需求。EditContext API 是为解决此类问题而提出的，它将文本输入与浏览器默认的编辑行为解耦，允许直接接收文本和构成输入，而无需通过监测 DOM 的变化。

EditContext API 的基础知识：

1. 创建 EditContext 对象，并与 DOM 元素相关联，使元素可编辑并接收文本输入。
2. 在 textupdate 事件的回调中接收输入，需要渲染用户输入的文本以及选择区域。
3. 开发者还需管理编辑区域的大小、用户选择变化、编辑 UI 的位置，并应用格式。

应用 EditContext API 的责任：

• 当编辑区域或用户选择的大小变化时，使用 updateControlBounds() 和 updateSelectionBounds() 方法来更新 EditContext 实例。
• 监听 characterboundsupdate 事件，根据响应调用 updateCharacterBounds() 方法。
• 监听 textformatupdate 事件，应用事件指定的格式化到编辑视图。
• 处理富文本编辑行为，例如监听 beforeinput 事件来处理文本加粗、斜体等。
• 监听用户选择变化，该 API 适用于广泛的用例，包括通过 <canvas> 元素渲染的编辑器。

EditContext 与 contenteditable 对比：

• EditContext 是实现全功能编辑器的优选，提供对如何处理文本输入的完全控制。
• 对于只需要简单的文本编辑支持的情况，仍然建议使用 <input>、<textarea> 元素或 contenteditable 属性。

文章总结道，通过 EditContext API 构建强大的自定义编辑体验在 web 上变得更加简易。它正式由 Microsoft Edge 团队在协作中实施至 Chromium，并已在 2024 年 1 月的 Chrome 和 Edge 版本 121 中发布。目前，它仅在基于 Chromium 的浏览器中可用，还未在其他浏览器中普及。对于有兴趣了解更多的开发者，可以查阅 MDN 文档，对于设计的意见反馈，可以在 EditContext API 的 Github 仓库提出 issue，对于实现的 bug，则可以在 crbug.com 提交报告。