网络的剪贴板及其存储不同类型数据的方式
If you've been using computers for a while, you probably know that the clipboard can store multiple types of data (images, rich text content, files, and so on). As a software developer, it started frustrating me that I didn't have a good understanding of how the clipboard stores and organizes data of different types.
如果您使用计算机已经有一段时间了,您可能知道剪贴板可以存储多种类型的数据(图像、富文本内容、文件等)。作为一名软件开发人员,我开始感到沮丧的是,我对剪贴板如何存储和组织不同类型的数据没有一个很好的理解。
I recently decided to unveil the mystery that is the clipboard and wrote this post using my learnings. We'll focus on the web clipboard and its APIs, though we'll also touch on how it interacts with operating system clipboards.
我最近决定揭开剪贴板的神秘面纱,并根据我的学习编写了这篇文章。我们将重点讨论网络剪贴板及其API,尽管我们也会涉及它与操作系统剪贴板的交互。
We'll start by exploring the web's clipboard APIs and their history. The clipboard APIs have some interesting limitations around data types, and we'll see how some companies have worked around those limitations. We'll also look at some proposals that aim to resolve those limitations (most notably, Web Custom Formats).
我们将从推荐网站的剪贴板 API 及其历史开始研究。剪贴板 API 有些有意思限制的限制于数据类型,我们将看到一些公司如何工作过这些限制。我们也将看到一些监视作为解决这些限制的建议(最主要的是,网站自定制格式)。
If you've ever wondered how the web's clipboard works, this post is for you.
如果你们更好奇迹网站的剪贴板如何作用,这篇文章对你有帮助。
Using the async Clipboard API
使用异步Clipboard API
If I copy some content from a website and paste it into Google Docs, some of its formatting is retained, such as links, font size, and color.
如果我从网站复制一些内容并粘贴到Google Docs中,一些格式将被保留,例如链接、字体大小和颜色。
But if I open VS Code and paste it there, only the raw text content is pasted.
但如果我打开 VS Code 并粘贴这里,只有原文本内容被粘贴。
The clipboard serves these two use cases by allowing information to be stored in multiple representations associated with MIME types. The W3C Clipboard spec mandates that for writing to and reading from the clipboard, these three data types must be supported:
剪贴板通过允许信息存储在与 MIME 类型相关联的多个表示中来满足这两种用例。W3C 剪贴板规范要求对于写入和读取剪贴板,必须支持以下三种数据类型:
-
text/plain
for plain text. -
text/plain
用于纯文本。 -
text/html
for HTML. -
text/html
用于HTML。 -
image/png
for PNG ima...