如何判断粘贴的数据是否是从我的页面复制的？

Question

我正在尝试编写一个所见即所得的编辑器。我不希望人们能够在 foriegn html 中粘贴，所以我想我可以将其转换为文本。但是我仍然希望粘贴 html 如果它源自同一元素（或者如果可能的话跨站点）。

那么有没有办法从粘贴事件中检测出内容来自哪里？

Answer 1

在你的编辑器的copy事件中，你应该在其中添加一些东西（独特的标志）就像一个特殊的包装一样，所以在粘贴事件中你只需要根据你的标志判断数据是否来自你的编辑器。

Answer 2

检测到复制事件（https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event）。

使用 setData API 来包含自定义数据类型，例如text/whatever。这几乎可以包括任何内容，例如用户从何处复制、何时复制等。您甚至可以在其中上传自己的自定义数据表示。

粘贴时，抓取对应的事件，寻找你自定义的数据类型。

编辑：我的错，没有仔细阅读关于必须防止默认的内容。

document.addEventListener('copy', (event) => {

    event.clipboardData.setData('text/test', 'sum text here');
    const selection = document.getSelection();

    // Essentially brute force copying selection.
    const range = selection.getRangeAt(0);
    const div = document.createElement('div');
    div.appendChild(range.cloneContents());
    const copy = div.innerHTML;

    event.clipboardData.setData('text/html', copy);
    event.preventDefault();
});

document.addEventListener('paste', (event) => {
    const clipboard = (event.clipboardData || window.clipboardData);
    let pasteTest = clipboard.getData('text/test');
    let paste = clipboard.getData('text/html');
    console.log (paste, '@@@@@@@@@@@', pasteTest);
});

Answer 3

 var let_paste = false;

    function handleCopy (e) {

        var clipboardData, pastedData;

        pastedData = e.clipboardData.getData('Text');

        // When let_paste is true the content have been copied from this site
        let_paste = true;

        alert('let it paste!')
    }

    document.getElementById('myDiv').addEventListener('copy', handleCopy);

<div id='myDiv' contenteditable='true'>Copy</div>

考虑上面的这段代码 - 我的想法是你设置一个全局变量来控制内容是否已从该站点复制 - 当内容从你的站点复制时创建一个事件将其设置为 true。然后，将内容本身保存在一个变量中，并与用户执行 "paste" 事件时粘贴的内容进行比较。

如何判断粘贴的数据是否是从我的页面复制的？

How to tell if pasted data was copied from my page?

html

javascript

events

paste

contenteditable