跳到主要内容

改进web上的文本编辑,一次一个功能

编写人 出版 2024年4月23日

网络的成功在很大程度上归功于它支持文本输入和表单提交的能力。换句话说,在网页上输入文本是网络的基本组成部分,我们都使用过。

但今天的现代web应用程序更进一步,允许您编辑整个文档、电子表格或演示文稿。其他应用程序允许您编写代码、与朋友聊天或编写电子邮件。

尽管用例非常多样化,但自网络早期以来,底层技术并没有发生太大变化。HTML输入文本区域元素仍然是输入文本的主要方式,而且效果很好。对于更高级的用例,web开发人员通常依赖内容可编辑的HTML属性,它允许您捕获富文本输入。

这些文本编辑原语功能强大,但构建高级体验仍面临许多挑战,有时需要的解决方案并不理想。

在Microsoft Edge团队中,我们非常熟悉这些挑战,并与合作伙伴携手合作,为每个人提供更好的网络文本编辑体验。

在本文中,我们将分享我们最近对Microsoft Edge和web平台所做的一些重要改进,我们对此感到非常兴奋:

  • 用人工智能重写文本。
  • 用数码笔直接在网页上书写。
  • 构建支持高级文本编辑表面的文本编辑器。
  • 改进剪贴板访问API。
  • 以及控制文本预测功能。

用Copilot重写文本

从124版开始,Microsoft Edge的AI撰写该功能在文档的可编辑文本区域内内联可用。

选择显示在可编辑字段中的文本部分,然后单击Copilot图标,通过迭代不同的AI生成的建议来开始重写该部分。

内联撰写对话框,用于重写电子邮件的一部分。

您可以根据需要更改音调、格式或长度设置。

能够在输入字段中直接访问Copilot可以节省时间并避免上下文切换。但我们也意识到,并非所有web上的文本可编辑表面都需要此功能,因此我们还引入了书面建议HTML属性来禁用它。本文末尾将详细介绍此属性。

有关使用Compose时如何处理数据的更多信息,请参阅Microsoft Edge隐私白皮书。对于企业,请使用ComposeInlineEnabled策略以配置功能。

用数字笔在任何文本字段中书写

Windows Ink允许您使用数字笔直接在Windows触摸设备上的输入字段中书写。这样可以减少在键盘和数码笔之间来回切换的需要,从而帮助您保持在工作流程中。

Microsoft Edge现在还支持Windows Ink,例如文本区域元素,输入元素,元素具有内容可编辑的属性或浏览器地址栏。

借助Microsoft Edge中的Windows Ink支持,您可以:

  • 在输入字段中或附近使用笔输入文本。
  • 通过在单词上涂鸦来删除文本。
  • 通过在文本中绘制垂直线来添加或删除空格。
  • 通过绘制水平线添加换行符。
手写文本和分隔符的示例,以及它们对输入字段中文本的影响

使用数码笔与网页交互时,Windows Ink可以节省大量时间,我们很想听听您的想法以及如何改进该功能。

请注意,您可以通过转到edge://settings/content/手写到文本在浏览器窗口中。

构建支持高级输入方法的富文本编辑器

如今,网络上的文本编辑技术很难真正将文本输入逻辑与文本呈现逻辑解耦。自定义文本编辑器通常必须使用使用内容可编辑的属性捕获文本输入事件,然后单独呈现文本,这通常会带来可访问性问题。

为了帮助实现这一点,我们在Chromium中提供了EditContext API,以便创建支持高级输入方法并避免黑客解决方案的自定义web文本编辑器。该API可从121开始在Microsoft Edge和其他基于Chromium的浏览器中使用。

使用EditContext API,web开发人员可以直接通过API界面接收文本输入事件,从而消除代码中不必要的复杂性,增强可访问性,并允许开发人员创建自己的编辑文本自定义视图。例如,可以使用API在<画布>元素。

该API支持用户在操作系统级别编写文本时使用的文本编辑UI界面,例如IME合成对话框。它甚至支持Windows Ink。

日语输入法合成窗口示例,通过使用EditContext API实现

要了解有关EditContext API的更多信息,请查看我们之前的公告和APIMDN参考文档

复制并粘贴HTML

文本编辑Web应用程序在复制和粘贴HTML格式的内容时经常会遇到剪贴板问题。有时,格式会丢失,有时,剪贴板的有效负载会比它应该的复杂得多。

为了解决这个问题,我们引入了未初始化的选项navigator.c剪贴板.read()方法,允许web应用程序选择何时接收完整的HTML内容,而不是浏览器加密的HTML版本。

要了解有关如何使用该选项的更多信息,请查看MDN上的Clipboard read()方法文档

此API已经帮助我们解决了影响应用程序的几个主要副本问题,从而改进了Excel Online。我们在Chromium中提供了API,使其可用于所有基于Chromius的浏览器,包括从122版开始的Microsoft Edge。

检测支持的剪贴板格式

将数据写入系统剪贴板时,使用剪贴板API,web开发人员无法知道他们试图编写的数据是否受支持。这意味着他们必须首先尝试将数据写入剪贴板,然后检查写入操作是否因不支持的数据格式而失败。

这会导致更复杂的代码和CPU周期方面的不必要成本。

为了解决这个问题,我们在剪贴板项目调用的接口支持(),这样可以在尝试写入数据之前检测受支持的剪贴板格式。例如,要测试文本/html支持mime-type,请使用ClipboardItem.supports(“text/html”)

Microsoft Edge 121附带了此新方法,其他Chromium浏览器也可以使用此方法。

控制浏览器的文本预测功能

如前所述,Microsoft Edge允许您使用内联编写功能重写文本。Edge还可以在您键入时预测文本文本预测功能。文本预测通过完成句子使写作速度更快。

Edge中的文本预测,在输入字段中完成句子

然而,我们意识到,并非所有的文本编辑界面都希望文本预测或内联合成功能在任何时候都可用。因此,从124版开始,我们引入了一个新的HTML属性,名为书面建议。新属性可用于关闭任何编辑器元素上的文本预测和内联合成。要了解更多信息,请查看我们的解释程序文档,和属性的规范

新的书面建议属性现在是Chromium代码库的一部分,使其可用于所有基于Chromium的浏览器。然而,由于Microsoft Edge是目前唯一能够访问这些文本预测和重写功能的浏览器,因此该属性在其他浏览器中没有任何影响。


网络上的文本编辑比以往任何时候都重要,我们可以继续通过解决特定挑战的新API和浏览器功能,让用户和开发人员体验更好。我们希望本文中描述的改进对您有用。

一如既往,我们很想知道您的想法,或者您是否发现了任何问题!要伸出手来,请单击按钮,然后转到帮助和反馈>发送反馈