如何粘贴点击？它适用于谷歌文档

Question

我希望能够在用户点击时启动真正的粘贴事件.我可以理解这可能是一个安全问题,因为如果任何网页有权访问用户剪贴板,那就不好了.所以我认为所有浏览器都不允许访问剪贴板数据.

但是例如在谷歌文档(在类似文字的应用程序中),我可以从自定义上下文菜单粘贴(鼠标右键单击假装为上下文菜单的html元素),即使剪贴板数据已被复制到剪贴板中应用程序,如Microsoft Paint.这适用于Google Chrome浏览器,这是我感兴趣的浏览器.

我认为他们使用闪光灯,但即使我完全禁用闪光灯,它仍然有效.关于这个问题已经有了问题,但提到的答案并不正确.该问题的另一个答案表明谷歌正在使用Chrome扩展程序,但即使我禁用了Chrome中的所有扩展程序,它仍然有效.

如何在Windows中重现:

• 在Chrome中禁用闪存,禁用所有扩展名
• 重新开始
• 转到谷歌文档并打开新的空写作文档(文档,而不是电子表格)
• 在Windows中运行microsoft paint应用程序
• 在microsoft paint中绘制一些东西,按Ctrl + A选择全部,按Ctrl + C进行复制
• 切换回chrome到docs空白页面,然后右键单击空白页面
• 选择人工上下文菜单粘贴(注意上下文菜单中是不是从Windows本机菜单,但它来自谷歌文档的Html网页)
• 您将看到剪贴板图像已粘贴到docs文档(!)
• 他们如何做到这一点？

如果用户在我的网页上按下Ctrl + V,我知道如何访问剪贴板数据,因为这会在当前窗口中触发粘贴事件.但是,如何在用户只需单击按钮或div时,在javascript(或使用jquery)中访问剪贴板数据或启动实际剪贴板数据(例如,在mspaint中复制的位图)的粘贴？

Answer 1

我希望能够在用户点击时启动真正的粘贴事件.我可以理解这可能是一个安全问题,因为......

以上是底线..

有这个代码JS小提琴

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>

如果使用不同的浏览器检查它,你会看到浏览器发生反应,用不同的处理剪贴板API使用queryCommandSupported()的结果是:

Chrome 47:

• 没有用户操作,复制:false,剪切:false,过去:false
  
• 使用用户操作,复制:true,剪切:true,粘贴:false

Firefox 43:

• 没有用户操作,复制:true,剪切:true,过去:false
  
• 使用用户操作,复制:true,剪切:true,粘贴:false

IE11: - 我相信它在Edge中是一样的

• 没有用户操作,复制:true,剪切:true,过去:true
  
• 使用用户操作,复制:true,剪切:true,粘贴:true
  
• 虽然所有选项都是正确的,但IE会要求用户对上述所有操作进行许可.

Safari: - 适用于iOS Safari

• 仅在有效选区上触发复制事件,仅剪切并粘贴在可聚焦的可编辑字段中.
  
• 只有OS剪贴板通过快捷键读取/写入,而不是通过document.execCommand().
  

有关Clipboard API caniuse.com/#search=clip的详细浏览器支持

浏览器也支持使用右键单击上下文菜单的粘贴,conteneditable="true"就像在这个JS Fiddle 2中一样

但是例如在谷歌文档(在类似文字的应用程序中),我可以从自定义上下文菜单粘贴(鼠标右键单击假装为上下文菜单的html元素),即使剪贴板数据已被复制到剪贴板中应用程序,如Microsoft Paint.

我认为他们使用闪光灯,但即使我完全禁用闪光灯,它仍然有效.

来自用于开发Google Apps附加组件的Google Apps脚本文档:
" 平台: Apps脚本的代码编辑器是您在Google表格,文档或表单中启动的Web应用程序.该语言基于JavaScript,but executes on Google's servers rather than directly in the user's browser(例外情况除外)客户端用户界面...... "

由于它是在他们的服务器上执行的,我认为他们可以启用某些功能,甚至使用Java来获得更好的体验.

编辑1:
如果你检查clipboard.js,你会看到该库没有"粘贴"选项,只有"复制"和"剪切",也在页面末尾的" 浏览器支持 "部分您将看到该库依赖于execCommand API,并且在Safari中不起作用.

编辑2:
在更新问题和评论后,对于Google文档部分,我按下Prt Sc了剪贴板中的屏幕截图,在Chrome中打开了Google文档,右键单击然后点击自定义中的 "粘贴" 上下文菜单,并确定它的工作原理,在Firefox中打开谷歌文档,一旦我点击"粘贴"选项我得到了这个回应

同样为了记录,我试图在IE11中做同样的事情,它仍然试图从21分钟开始启动Google文档.

所以结论可能是,并且大多数情况下," 谷歌 "Chrome有一个例外: - 类似于条件声明 - 用于浏览器中的" 谷歌 "文档和其他谷歌服务,我认为@ julien-gregoire是正确的在Firefox中扩展.

从此Google文档支持页面:

出于安全原因,大多数浏览器不允许使用文档,表格和幻灯片等网络应用程序通过菜单使用计算机的剪贴板.

但是,如果您使用Chrome,则可以通过安装Google Drive Chrome应用授予访问剪贴板的权限.这允许您使用右键单击菜单复制和粘贴内容(或从工具栏的"编辑"菜单中选择"复制"或"粘贴").要安装该应用,请访问Chrome网上应用店.

而这smallbusiness页:

如果没有键盘快捷键,您还有两个复制和粘贴选项:转到"编辑"菜单并选择"复制"或"粘贴",或右键单击文档并从中选择"复制"或"粘贴"上下文菜单.在Google文档中,这两个选项仅适用于安装了Google云端硬盘Web应用的Chrome用户.该应用程序是免费的,但不适用于其他浏览器.

所以他们似乎已经将该应用程序作为新版Chrome中的内置功能实现.

Answer 2

自定义粘贴适用于Chrome,但只能通过扩展程序.如果你看一下谷歌文档代码,你会发现没有安装扩展程序,你就无法粘贴.你可以尝试在Firefox中使用上下文菜单粘贴,它会告诉你它不可用,你需要使用CTRL+ V.你可以在google docs源代码中找到它:

复制和粘贴需要免费的Google云端硬盘网络应用.这使我们可以访问您的剪贴板,以便您可以剪切,复制和粘贴.

因此很明显,粘贴命令需要扩展才能工作.

一种方法是使用execCommand('paste')从页面调用时不起作用,但实际上在扩展内容脚本中工作.您只需要将clipboardRead添加到manifest.json权限,如下所示:

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

然后在您的内容脚本document.execCommand('paste')中将工作.

编辑:

正如@ tomas-M和@ Mi-Creativity所指出的,Chrome浏览器上google文档的实现似乎是在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')在控制台中测试,而在谷歌文档上给出了真实,而在其他页面上它给出了错误,所以我真的认为这是在谷歌文档中实现这个功能的方式.