Share via


IE11 中增强的丰富编辑体验

对于 Internet Explorer 11,基于 Web 的应用程序和网站可提供丰富的编辑体验,允许用户轻松捕获和共享数据。在线和基于云的内容创建应用场景,例如电子邮件和基于 Web 的文档编辑(包括 Office 365),依赖于 HTML5 的 contentEditable 功能。对于 IE11,用户可以从各种输入源粘贴图像、在保留格式的同时复制列表,并更轻松地撤消他们的编辑。

从所有源粘贴图像并进行完全控制

在 IE11 中,网站现在可以直接访问从剪贴板粘贴的图像。IE11 是首个支持直接从剪贴板粘贴图像(例如,从照片编辑软件或从打印屏幕),以及粘贴包含本地图像(例如,从在本地路径临时存储图像的 Microsoft Office 等应用程序)的 HTML 的浏览器。无论是 DataURI 还是 Blob,都可以用来编码这些图像。

借助 IE11 中全新的 DataURI 编码功能,网站可以自动支持从剪贴板粘贴图像,而无需使用额外的 Javascrip。默认情况下,IE11 从剪贴板粘贴图像,具体方法是将图像转换成 DataURI,并将它们作为 HTML 插入到 contentEditable。例如,如果在照片编辑软件中绘制一个红色的方框,并将其复制到 contentEditable,图像将在您正在编辑的标记中成为 <img> 标签:

 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAI
 AAAFSDNYfAAAAaklEQVR42u3XQQrAIAwAQeP%2F%2F6wf8CJBJTK9lnQ7FpHGaOurt1
 I34nfH9pMMZAZ8BwMGEvvh%2BBsJCAgICLwIOA8EBAQEBAQEBAQEBK79H5RfIQAAAAA
 AAAAAAAAAAAAAAAAAAAAAAID%2FABMSqAfj%2FsLmvAAAAABJRU5ErkJggg%3D%3D"> 

Web 开发人员可以选择使用 Blob,而非需要添加几行代码的 DataURI。通过使用 blob,应用程序可以直接处理图像数据。例如,在将图像上载到云之前,Web 邮件客户端可能需要将它们编码为 MIME 格式。相对于不需要对象管理的 DataURI,使用 blob 的应用程序可以管理对象生存期。

IE11 中的新剪贴板 API 使支持作为 Blob 的图像粘贴变得非常轻松。下面的代码可将所有粘贴的图像转换成 Blob

 var blobList = []; <htmlObject>.addEventListener("paste", function() { var fileList = clipboardData.files; for (var i = 0; i < fileList.length; i++) { var file = fileList[i]; var url = URL.createObjectURL(file); event.msConvertURL(file, "specified", url); blobList.push(file); } } );

下表总结了如何在 dataURI 和 blob 之间进行选择:

  DataURI Blob
需要额外的 JavaScript 代码
支持从剪贴板粘贴图像
支持粘贴引用本地图像的 HTML
图像数据的存储位置 粘贴的 HTML 中的内联代码(可大幅扩展 HTML 的尺寸) 外部引用(与 HTML 尺寸无关,但应用程序需要在发送 HTML 时处理导出的图像)
图像数据的灵活性 低(需要首先从 HTML 进行提取) 高(可使用 blob 引用进行处理)

您可以在粘贴图像体验中立即试用图像粘贴,在这一体验中,您可以在使用 DataURIBlob 之间进行切换来粘贴图像。

粘贴图像体验测试是否您的浏览器可以使用 DataURI 或 Blob 来粘贴图像

粘贴图像体验测试是否您的浏览器可以使用 DataURI 或 Blob 来粘贴图像

粘贴列表为 HTML 列表

在 IE11 中,用户可以粘贴来自常用的 Office 应用程序的列表,并在浏览器中继续编辑该列表。在粘贴列表之后,用户只需按下列表结尾的 Enter 即可新建项目。当粘贴来自 Microsoft Word 等文字处理应用程序的格式化内容时,该功能显得尤其重要。IE11 可以识别格式化文本中包含列表,并使用 <ul> 或 <ol> 元素将其转换为实际的 HTML 列表,以便您可以按照预期的方式编辑该列表。

粘贴和编辑来自 Microsoft Word(左侧)等应用程序的格式化列表在 IE11(右侧)中非常轻松和自然

粘贴和编辑来自 Microsoft Word(左侧)等应用程序的格式化列表在 IE11(右侧)中非常轻松和自然

丰富和自然的撤消体验

在 IE11 中,网页可以自动获得更好的撤消体验,Web 开发人员可以对脚本中的 DOM 操作参与撤消堆栈的方式进行精细控制。大多数情况下,开发人员无需担心撤消体验,IE11 可以按照预期的方式进行工作。例如,如果页面包含在单击时调用 execCommand(“粗体”)的“粗体”按钮,IE11 将自动支持撤消该操作,以便用户可以点击 Ctrl-Z 来撤消该文本。IE11 跟踪每个由脚本初始化的 DOM 更改,并将其放到单独的撤消单元。

IE11 的默认撤消堆栈可以处理大部分简单的脚本编辑,但有时 Web 开发人员需要支持更复杂的多步骤编辑。例如,页面可能会检测到用户键入“:)”,删除该文本,并插入一个笑脸字形符号。在此情况下,IE 通常会创建两个撤消单元(一个用于检测,另一个用于插入),用户必须点击 Ctrl+Z 两次来撤消脚本更改,而这可能不是您所期望的。IE11 添加了两个新命令,从而使 Web 开发人员可以实现该应用场景:您可以调用 ms-beginUndoUnit,运行您的脚本,然后调用 ms-endUndoUnit。两个命令之间的所有 DOM 更改将被分组为一个单一的撤消单元。

Web 开发人员可以使用 ms-clearUndoStack 命令来以编程方式重置撤消历史记录。如果您将编辑器实例重新用于多个上下文,该功能非常有用。例如,当用户通过多个电子邮件进行回复时,您可以在每打开一个新的电子邮件时,从上一封电子邮件中清除撤消堆栈。

您可以试用撤消测试体验,在自动替换笑脸期间,该体验中使用了新命令来分组撤消单元。

“撤消测试体验”测试您的浏览器中的多步骤撤消操作

撤消测试体验测试您的浏览器中的多步骤撤消操作

总结

对于 Internet Explorer 11,基于 Web 的应用程序和网站可提供丰富的编辑体验,允许用户轻松捕获和共享数据。用户可以创建包含自动图像粘贴、改进的格式化列表复制和粘贴,以及自然撤消在内的丰富内容。

在 Windows 7 或 Windows 8.1 上试用 IE11 中的这些新功能,并通过 Connect 向我们提供反馈意见和建议。

Internet Explorer 项目经理
Jianfeng Lin 和 Ben Peters