如何从浏览器/维基百科 HTML 表复制/粘贴文本并在 VSCode 中将其另存为 HTML？

Question

我知道剪贴板必须有复制文本的 HTML 副本 (CMD+C)，因为当我从维基百科复制 HTML 表格（如 此表格）时，它会粘贴到电子表格中 (CMD+V)，就好像它知道HTML 数据：

如何在 VSCode 中执行与 Google Sheets 相同的操作？也就是说，我想将复制的原始 HTML 粘贴到 VSCode 中，我该怎么做？我想我可以右键单击检查元素并复制外部 HTML，但是有更直接的方法吗？

Answer 1

TL;DR：使用这个：https://marketplace.visualstudio.com/items?itemName=d3v.pastespecial

---

更长的答案：

正确，剪贴板存储了多种格式的复制数据，例如纯文本和 HTML，正如您在 Google 表格示例中所演示的那样。

在浏览器上下文中，您可以使用 Clipbopard API 来访问此数据，但由于安全原因，这需要由用户操作触发。

此演示将通过安全连接在 Chrome 中运行：

document.addEventListener('click', async () => {
  try {
    const clipboardItems = await navigator.clipboard.read();
    for (const clipboardItem of clipboardItems) {
      for (const type of clipboardItem.types) {
        if (type === 'text/html') {
          const blob = await clipboardItem.getType(type);
          const text = await new Response(blob).text();
          console.log('HTML content from clipboard:', text);
        }
      }
    }
  } catch (err) {
    console.error('Failed to read clipboard:', err);
  }
});

粘贴到 VSCode 时，无论剪贴板上有什么，它总是粘贴纯文本。

这里有一个问题正在讨论：https://github.com/Microsoft/vscode/issues/57577

从最后一条评论中可以看出，当前实现直接粘贴 HTML 功能的建议是使用以下扩展：https://marketplace.visualstudio.com/items?itemName=d3v.pastespecial

安装扩展程序后，从 Web 浏览器将一些文本复制到剪贴板，然后在 VS Code 中按 Ctrl + Shift + V 并选择 HTML Source，HTML 将粘贴到编辑器中。

我刚刚尝试了一下，在 Linux 上运行得很好。扩展页面说它也支持 Windows，但看起来 macOS 支持有限。

---

编辑：射击！看起来你正在使用 mac。我想这行不通，在这种情况下，右键单击检查元素并复制外部 HTML 是（遗憾的是）正确的方法。