Browser复制/粘贴组件

Question

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

我们有一组组件(假设它像一个连接div的流程图)，这是从一个简单的json中构建的。

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

现在真正的问题开始了:

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

2:这些类型的应用程序一般是如何工作的，例如，在Slack上，我复制了一个格式化的markdown消息到我的剪贴板上，并将其粘贴到文本编辑器中，但我没有看到所选文本上的任何markdown命令，但不知怎么的，我在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>