Javascript：如何使用复制/粘贴选项制作自定义上下文菜单

Question

我们正在为我们的在线文本编辑器制作自定义上下文菜单。内部有复制/粘贴选项是唯一的性质。但是我们发现从浏览器中访问系统剪贴板很困难。几年前似乎不可能：Custom Context Menu with Javascript?

尽管如此，google设法在谷歌文档中完成了这项工作，没有闪存或特殊插件的帮助，据我所知，它在Chrome和Firefox中都有效。我想知道他们用什么来达到这个目的？

Answer 1

经过一些更多的研究，我认为该功能在Chrome中有效，但在firefox中却没有（我的问题中的错误）。弹出窗口将显示指示用户使用快捷方式：

因此Google似乎使用Google Docs Offline扩展程序来提供此功能。如果分机已停用，则会提示您安装Google云端硬盘应用。

很遗憾，没有通用的解决办法。

以下对话已有几年历史，但仍然有道理：

How to paste on click? It works in google docs

javascript cut/copy/paste to clipboard: how did Google solve it?

Adding copy & paste functionalities to a custom menu of a webapp

Answer 2

要渲染菜单，您可以收听右键单击触发的上下文菜单事件。然后，您可以渲染自定义菜单。

复制/粘贴等可能是使用document.execCommand（）完成的，可以用来触发复制/粘贴等。检查浏览器以查看支持哪些命令。

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

// on right click, copy to clipboard.
document.querySelector('body').addEventListener('contextmenu', function( event ) {
    // prevent the normal context menu from popping up
    event.preventDefault();
    // copy current selection
    document.execCommand('copy');
});

Answer 3

鼠标按下时带有粘贴命令的

按钮

if (document.addEventListener) {
    document.addEventListener('copy', function (ev) {
      ev.clipboardData.setData('text/plain', window.getSelection());
      ev.preventDefault();
  });
}

这应该适用于大多数浏览器。