The web's clipboard, and how it stores data of different types
文章首先介绍了网页剪贴板及其 API 的历史和功能,强调了剪贴板在存储不同类型的数据(如图像、富文本内容、文件等)方面的重要性。作者通过探索剪贴板 API 的工作原理,揭示了其在数据类型方面的一些限制,并讨论了如何通过 Web Custom Formats 等提案来解决这些限制。
文章详细说明了如何使用异步 Clipboard API 来读取和写入剪贴板。例如,当用户从网站复制内容并粘贴到 Google Docs 时,可以保留一些格式,如链接、字体大小和颜色。而粘贴到 VS Code 时,只保留纯文本内容。这是因为剪贴板允许信息以与 MIME 类型相关的多种表示形式存储。
作者还探讨了如何通过 Clipboard API 写入其他数据类型,例如 JSON,并发现异步 API 在写入时对数据类型有限制,而 Clipboard Events API 则没有这些限制。此外,文章还讨论了 “isTrusted” 属性,解释了它如何影响剪贴板事件的可信任度。
文章接着介绍了如何构建一个可以写入任意数据类型的复制按钮,以及如何使用 document.execCommand ("copy") 来触发一个可信赖的复制事件。对于粘贴按钮,作者分析了 Google Docs 和 Figma 的不同实现方式。
文章还探讨了将 HTML 用于剪贴板的好处,以及浏览器如何在操作系统剪贴板中处理自定义数据类型。作者提到了 Raw Clipboard Access 提议,以及后来的 Web Custom Formats 提议,后者允许通过在数据类型前加上 "web" 前缀来写入自定义数据类型。
最后,作者对 Web Custom Formats 表示乐观,并希望它能被所有主流浏览器实现,因为这将使剪贴板能够以安全和实用的方式写入自定义数据类型。