添加复制 &将功能粘贴到 Web 应用程序的自定义菜单 [英] Adding copy & paste functionalities to a custom menu of a webapp

问题描述

我们正在开发一个包含文本编辑器的网络应用程序.它是用 HTML5 + Javascript 编写的.

我们成功地向我们的网络应用添加了一个自定义菜单，但我们没有成功地添加复制&粘贴功能，如在 Google Docs 中.据我们了解，这可以使用可以访问操作系统剪贴板的 Flash 来实现.但是，我们希望避免使用该技术并使用替代技术 - 我认为 Google 也不使用 Flash.

有人能给我们指出一个有效的替代方法吗?

谢谢.

解决方案

W3C 有一个.

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.

解决方案

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.

这篇关于添加复制 &将功能粘贴到 Web 应用程序的自定义菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！