Как узнать, были ли скопированные данные скопированы с моей страницы? - PullRequest
Новая
       39

Как узнать, были ли скопированные данные скопированы с моей страницы?

0 голосов
/ 26 июня 2019

Я пытаюсь написать редактор wysiwyg. Я не хочу, чтобы люди могли вставлять в чужие html, поэтому я решил, что смогу преобразовать его в текст. Но я все же хочу, чтобы HTML-код вставлялся, если он возник из того же элемента (или, если возможно, по всему сайту).

Так есть ли способ определить из события вставки, откуда пришло содержимое?

Ответы [ 3 ]

2 голосов
/ 26 июня 2019

Обнаружение события копирования (https://developer.mozilla.org/en-US/docs/Web/API/Element/copy_event).

Используйте API setData для включения пользовательского типа данных, например текста или чего-либо еще. Это может включать в себя почти все, например, куда пользователь скопировалот, когда и т. д. Вы даже можете загрузить туда свое собственное представление пользовательских данных.

При вставке захватите соответствующее событие и найдите свой собственный тип данных.

Редактировать: Мои плохие,не читал внимательно о необходимости предотвращения дефолта. 

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);
});
0 голосов
/ 26 июня 2019 

 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, когда содержимое копируется с вашего сайта.Затем сохраните само содержимое в переменной и сравните с вставленным содержимым, когда пользователь выполнит событие «вставка».

0 голосов
/ 26 июня 2019

В событии копирования вашего редактора вы должны добавить в него что-то (уникальный знак), как в специальную обертку, поэтому при вставке события вам просто нужно определить, поступают ли данные из вашего редактора в соответствии с вашим знаком.

...