Как вставить на клик? Он работает в документах google

Я хочу иметь возможность инициировать реальное событие вставки, когда пользователь нажимает. Я могу понять, что это может быть проблемой безопасности, потому что, если на какой-либо веб-странице есть доступ к буферу пользователей, это будет плохо. Поэтому я думал, что все браузеры запрещают доступ к данным буфера обмена.

Но, например, в документах google (в текстовом приложении), я могу вставить из настраиваемого контекстного меню (щелчок правой кнопкой мыши на элементе html, притворяющемся контекстным), даже если данные буфера обмена были скопированы в буфер обмена в разных приложениях, таких как Microsoft Paint. Это работает в браузере Google Chrome, который является браузером моего интереса.

Я думал, что они делают это с использованием flash, но он все еще работает, даже если я полностью отключу флеш-память в хром. Об этом уже говорилось question, но ответ, упомянутый там, неверен. Другой ответ на этот вопрос предполагает, что Google использует для этого расширение chrome, но работает, даже если я отключу все расширения в chrome.

Как воспроизвести в окнах:

отключить флеш-память в Chrome, отключить все расширения
перезагрузка
перейдите в google docs и откройте новый пустой документ для записи (Docs, а не электронная таблица).
запускать приложение для рисования microsoft в windows
нарисуйте что-нибудь в краске microsoft, нажмите Ctrl + A, чтобы выделить все, Ctrl + C, чтобы скопировать
переключитесь на chrome на пустую страницу документов и щелкните правой кнопкой мыши на пустой странице
выберите "Вставить" из искусственного контекстного меню (обратите внимание, что контекстное меню не является внутренним меню из окон, но оно происходит с веб-страницы html в документах google).
вы увидите, что образ буфера обмена был вставлен в документ документов (!)
как они это делают?

Я знаю, как получить доступ к данным буфера обмена, если пользователь нажимает Ctrl + V на моей веб-странице, потому что это вызывает событие Paste в текущем окне. Но как я могу получить доступ к данным буфера обмена или инициировать вставку фактических данных буфера обмена (например, растровое изображение, скопированное в mspaint) в javascript (или с помощью jquery), в то время как пользователь просто нажимает кнопку или div?

Ответ 1

Я хочу иметь возможность инициировать настоящее событие вставки, когда пользователь нажимает. Я могу понять, что это может быть проблемой безопасности, потому что...

Выше нижняя строка..

Имея этот код JS Fiddle

var Copy =  document.getElementById('copy'),
    Cut =  document.getElementById('cut'),
    Paste =  document.getElementById('paste');

// Checking Clipboard API without an action from the user
console.log('Copy:' + document.queryCommandSupported('copy'));
console.log('Cut:' + document.queryCommandSupported('cut'));
console.log('Paste:' + document.queryCommandSupported('paste'));


//Now checking the clipboard API upon a user action
Copy.addEventListener('click', function(){
    console.log('Copy:' + document.queryCommandSupported('copy'));
});

Cut.addEventListener('click', function(){
    console.log('Cut:' + document.queryCommandSupported('cut'));
});

Paste.addEventListener('click', function(){
    console.log('Paste:' + document.queryCommandSupported('paste'));
});

<button id="copy">Copy</button>
<button id="cut">Cut</button>
<button id="paste">Pate</button>

Ответ 2

Пользовательская вставка работает в Chrome, но только через расширение. Если вы посмотрите на код документации Google, вы увидите, что без установленного расширения вы не можете вставить. И вы можете попробовать в Firefox использовать вставку контекстного меню, он скажет вам, что он недоступен, и что вам нужно использовать CTRL + V. Вы можете найти это в исходном коде документа google:

Для копирования и вставки требуется бесплатное веб-приложение Google Диска. Это позволяет нам получить доступ к вашему буферу, чтобы вы могли вырезать, копировать и вставлять.

Итак, кажется очевидным, что команде paste требуется расширение для работы.

Один из способов сделать это - использовать execCommand('paste'), который не работает при вызове со страницы, но фактически работает в содержимом расширения script. Вам нужно добавить clipboardRead в разрешения manifest.json, например:

permissions: {
    ...
    "clipboardRead"
    ...
}

Тогда в вашем контенте будет работать script document.execCommand('paste').

EDIT:

Как указано @tomas-M и @Mi-Creativity, реализация в google docs в Chrome, похоже, находится в самом Chrome, а не в открытом расширении. Возможно, это может дать представление о том, где это определено: https://code.google.com/p/chromium/codesearch#chromium/src/chrome/common/extensions/api/_permission_features.json&q=clipboardRead&sq=package:chromium&dr=C&l=164

Трудно сказать, действительно ли это работает, но в любом случае вы можете "разблокировать" execCommand('paste') для другого сайта через расширение. Не очень практично, но это работает.

И тестирование document.execCommand('paste') в консоли, в то время как в google docs задано значение true, а на других страницах - false, поэтому я действительно думаю, что он реализует эту функцию в документах google.

Ответ 3

Он работает по-разному в разных браузерах. Вы можете найти рабочую реализацию здесь: https://jsfiddle.net/1vmansr2/

Соответствующий JS:

function myFunction() {

   navigator.clipboard.readText()
.then(text => {
document.getElementById("demo").innerHTML = text;

})
.catch(err => {
document.getElementById("demo").innerHTML = 'Failed to read clipboard contents: '+err;
});


}