瀏覽器復制/粘貼組件

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>