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?

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?

• javascript

• 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 Commented Jan 24, 2017 at 9:45
• your question is how make custom context menu or how get access to clipboard? – Artem Ilchenko Commented Jan 24, 2017 at 9:46
• It's about how to access the clipboard – Xun Yang Commented Jan 24, 2017 at 9:48
• clipboardjs. – Graham Commented Jan 24, 2017 at 9:49
• Ironically it doesn't allow paste – Xun Yang Commented Jan 24, 2017 at 9:50

3 Answers 3

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:

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

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 mands are supported.

https://developer.mozilla/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');
});

button with paste mand 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.