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

Question

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

那么有没有办法从粘贴事件中检测内容的来源？

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