6

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.

Alessandro
  • 61
  • 1
  • 2

3 Answers3

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:

Google Docs clipboard menu modal

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.

Andrew
  • 4,145
  • 2
  • 37
  • 42
0

Have a look at the following: https://stackoverflow.com/a/9658362/1688441

As in the above answer, you can have your internal simulated clipboard for use within your app, but copy/paste across windows apps is done with flash.

Community
  • 1
  • 1
Menelaos
  • 23,508
  • 18
  • 90
  • 155
0

For Firefox and Chrome, there's the simple copy(<insert copy text here>) function, but that's only in Firefox & Chrome, as far as I can tell. For cross-browser support, use the answer above.

Atutouato
  • 375
  • 4
  • 13