浏览器复制/粘贴组件

Question

我们正在使用新的剪贴板 API 来实现浏览器/操作系统范围的复制粘贴。

我们有一组组件（假设它像一个连接了 div 的流程图）并且是从一个简单的 json 构建的。

我们的目标是实现复制和粘贴。我们手头有一个底层的 JsON，我试图将 Json 文件保存在剪贴板中。

现在真正的问题开始了：

1：复制和粘贴是操作系统范围的，所以我怎么知道，当前复制的元素是 json，这就是我们构建流程所需要的。例如：用户可以复制他们想要的任何内容，但我只想要我的系统可以解析的数据。

2：这些类型的应用程序通常如何工作，例如，在 Slack 上，我将格式化的降价消息复制到我的剪贴板中，并将其粘贴到文本编辑器中，但我没有在所选内容上看到任何降价命令文本，但不知何故我在 slack 中粘贴了相同的内容，我收到了与我之前复制的相同的消息。

是否有人做过组件的复制/粘贴， 任何帮助都非常感谢。

Answer 1

这是一个如何进行剪贴板操作的基本示例。阅读paste 和copy 事件以获取更多详细信息。您也可以尝试为剪贴板数据设置不同的content-type。这可能是 Slack 的做法：在纯文本中设置一个剪贴板条目（没有 Markdown 格式），在 Markdown 中设置一个。

const input = document.getElementById("testInput");

input.addEventListener("copy", (e) => {
  console.log("copied!");
  e.clipboardData.setData('text/plain', JSON.stringify({
    test: "value"
  }));
  e.preventDefault();
});

input.addEventListener("paste", (e) => {
  console.log("pasted!");
  //console.log(e);
  if (e.clipboardData.types[0] == "text/plain") {
    const txt = e.clipboardData.getData('text')
    try {
      const json = JSON.parse(txt);
      // TODO: validate that object has correct keys
      console.log(json);
      e.preventDefault();
      // I added prevent default, since you probably want to have your own logic for rendering the clipboard content
    } catch (e) {
      console.error("text is not JSON parseable: " + txt);
    }
  }
});

<input id="testInput"></input>