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

Question

We are working on a web application which includes a text editor. It's written in HTML5 + Javascript.

We successfully added a custom menu to our web app, but we have not succeeded in adding copy & paste functionalities as in Google Docs. To our understanding, this can be achieved using Flash which can access the OS clipboard. However, we would like to avoid that technology and use an alternative - I don't think that Google uses Flash either.

Can anybody point us to a valid alternative approach?

Thanks.

Answer 1

W3C has a working draft for a Clipboard API. It's not hugely supported yet but it might be usable in the future. You'll have to take a closer look at what's not supported. An example from the W3C spec seems pretty simple:

var pasteEvent = new ClipboardEvent('paste', { bubbles: true, cancelable: true, dataType: 'text/plain', data: 'My string' } );
document.dispatchEvent(pasteEvent);

An article from MDN seems to take a different approach, using XPCOM Components, but if I'm not mistaken that will only work in FireFox.

However, the answer that meewoK links to probably makes the best point. If it's a text field, you can use your standard keyboard commands (probably the most common way people copy/paste?) or the OS's right-click menu (unless you're overriding it in your app). What Google Docs currently does when you try to access clipboard commands via the Edit menu is display a modal that tells you to use the keyboard commands:

Personally, I would implement something like that while keeping an eye on the Clipboard API. Then, as browsers start to implement it, you can detect its presence and override that modal.