浏览器复制/粘贴组件

Question

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

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

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

现在真正的问题开始了：

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

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

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

Answer 1

这是如何进行剪贴板操作的基本示例。 阅读粘贴和复制事件以获取更多详细信息。 您还可以尝试为剪贴板数据设置不同的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>