Question

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

那么有没有一种方法可以从粘贴事件中检测出内容的来源？

Answer 1

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

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

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

编辑：不好意思，我没有仔细阅读有关必须防止Default的内容。

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 2

在编辑器的复制事件中，您应该像特殊包装一样在其中添加一些内容（唯一符号），因此在粘贴事件中，您只需要根据符号来判断数据是否来自编辑器即可。

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。然后，将内容本身保存在变量中，并在用户执行“粘贴”事件时与粘贴的内容进行比较。

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

3 个答案: