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

【问题标题】：How to tell if pasted data was copied from my page?如何判断粘贴的数据是否是从我的页面复制的？
【发布时间】：2019-06-26 01:40:13
【问题描述】：

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

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

【问题讨论】：

标签： javascript html events contenteditable paste

【解决方案1】：

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

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

粘贴时，抓取相应的事件并查找您的自定义数据类型。

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

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);
});

【讨论】：

我用 setData() 设置的数据似乎只有在我防止默认（）复制事件时才有效（似乎默认行为会覆盖我设置的数据）。但是它不会将 text/html 复制到剪贴板。如果可以的话，我会手动设置它，但 getData() 函数似乎不适用于复制事件，只需粘贴即可。
@stackers 抱歉，我没有注意到 preventDefault 的警告。我实际上一直在使用浏览器插件，这些插件的限制稍微少一些。附：奇怪，它刚才还在工作，但我需要运行。
@stackers 已完成，已修复。它应该适用于大多数现代浏览器，但要进行测试。
请注意，尽管 IE 仅支持 text（甚至不支持标准的 text/plain...），如果您尝试使用其他任何内容，则会抛出异常。
这样就行了。我试图做类似的事情，但遇到了不包括 html 的选择问题，所以首先放入一个新的 div 是个好主意。不支持 IE 没问题 =]

【解决方案2】：

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

【讨论】：

【解决方案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);

&lt;div id='myDiv' contenteditable='true'&gt;Copy&lt;/div&gt;

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

【讨论】：