2

We're making a custom context menu for our online text editor. It's only nature to have copy/paste options inside. However we found out it's difficult to access system clipboard from within the browser. A few years ago it seemed impossible: Custom Context Menu with Javascript?

Still, google managed to do it in google docs, without the help of flash or special plugins, and it's working in both chrome and Firefox as far as I know. I'm wondering what they use to achieve this?

enter image description here

Community
  • 1
  • 1
Xun Yang
  • 4,209
  • 8
  • 39
  • 68
  • Event handler on the right click mouse button that contains a preventDefault(), so that the standard menu is not shown. Same function trigegrs a render of a menu next to the current position of the mouse pointer. – Shilly Jan 24 '17 at 09:45
  • your question is how make custom context menu or how get access to clipboard? – Artem Ilchenko Jan 24 '17 at 09:46
  • It's about how to access the clipboard – Xun Yang Jan 24 '17 at 09:48
  • https://clipboardjs.com/ – Graham Jan 24 '17 at 09:49
  • Ironically it doesn't allow paste – Xun Yang Jan 24 '17 at 09:50
  • Surely paste is the easier part of the process? Capture the copied data using the `success` event and then do what you like with it. – Graham Jan 24 '17 at 09:52
  • But then the user needs to trigger the paste event, like pressing ctrl-v or using paste in the vanilla context menu? In that case doesn't it defeats the purpose of a customized context menu? – Xun Yang Jan 24 '17 at 09:55

3 Answers3

1

To render the menu, you can listen to the contextmenu event, which is triggered by right clicking. Then you can render a custom menu.

The copy/paste etc is probably done using document.execCommand(), which can be used to trigger copy/paste and such. Check your browser to see which commands are supported.

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');
});
Ricardo Sanchez
  • 4,935
  • 11
  • 56
  • 86
Shilly
  • 8,511
  • 1
  • 18
  • 24
  • Seems like "paste" does not work in my browser(Chrome 56). From my search, seems like people usually use them in chrome extensions – Xun Yang Jan 24 '17 at 12:34
  • `document.execCommand('paste');` works for me in IE11, so I'm afraid I can't help you with that one. – Shilly Jan 24 '17 at 12:44
1

After some more research, I figured the feature works in Chrome, but not in firefox(mistake in my question). A popup would show up instructing the user to use shortcut instead: A Dialog showing incompatibility with browsers suggesting key shortcuts be used as a workaround, for a mac

So it seems like Google uses Google Docs Offline extension to provide this function. If the extension is disabled, it will prompt you to install Google Drive app.

So sadly there's no universal solution for this.

The following conversation is a few years old, but still holds the truth:

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

Ryan Leach
  • 4,262
  • 5
  • 34
  • 71
Xun Yang
  • 4,209
  • 8
  • 39
  • 68
0

button with paste command on mousedown

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

This should work on most browsers.

cabbaand000
  • 3
  • 5