ZeroClipboard2 copy and paste across browsers

absrtact: We usually use the copy and paste function, in the browser end, to be used a button to achieve, the use of native JS code to achieve, is difficult, fortunately Zeroclipboard, the emergence of the solution to this embarrassing problem. ZeroClipboard2 Introduction

When you design a front-end page, the buttons often accompany the submission or reset of the data. However, one time, the demand is to click the button, the background display in the page to the specific content of the Clipboard, so that users save the selected text and press Crtl+c action. This gives me the opportunity to contact and use a good tool: ZeroClipboard2.
The principle of ZeroClipboard2 is simple: use transparent flash overlay on the Copy button, click Flash, transfer the copied content into Flash, and then write the incoming content to the Clipboard via Flash.
ZeroClipboard2 use method is also simple rough: The Flash and JS placed in the same path, and then reference JS can be. ZeroClipboard2 Simple Application

Let's take a look at one example and learn the simplest ZEROCLIPBOARD2 use:
Tools that might be used
-ZeroClipboard2.2.0
-Eclipse 4.5
-Tomcat 7
-JQuery 1.7.2
-ExtJs

The following clip.html

<! 
    DOCTYPE html> 
 
Skeleton of the project:

You need to introduce ZEROCLIPBOARD2 files Zeroclipboard.js and zeroclipboard.swf files when you use them, and it is recommended that you put them in a directory.
The Data-clipboard-target property used in the code is to specify that the content is to be replicated Id,zeroclipboard will attempt to retrieve the text data by the value, Textcontent, innertext property of the element in turn. Bind the content data to the button with the ID copy.
Because of the security restrictions of the Flash local sandbox, the above code will not work if it is opened directly by the browser in the local HTML file. I run it with Tomcat, and if the eclipse is open by default, it doesn't work and needs to be opened in a local browser.

Open in Chrom:

Click Copy, Ctrl + V in the Paste bar to see the effect:
ZeroClipboard2 and jquery:

Actual use, we are major General JS code and HTML code together, but to introduce JS file, may also use jquery.
Improved clip.html

<! DOCTYPE html>
 
Introduction of the Demo.js

$ (document). Ready (function () {
    var clip = new Zeroclipboard ($ ("#copy"));

 
Skeleton of the project:
ZeroClipboard2 and ExtJS:

In the production environment, we are using ExtJS. In this process, the most difficult to control is when to initialize Zeroclipboard, because the ExtJS button is generated later, I can not easily add such as the Data-clipboard-target property to tell Zeroclipboard to copy what content , and there is no clear place to write the logic of New Zeroclipboard (), so how to deal with it. ExtJs should initialize Zeroclipboard at the appropriate location
When you use ExtJS to create a button, you often use the following methods:

Ext.onready (function () {   
var buttonname = new Ext.button ({
                 ID: "ButtonName",
                 renderTo:Ext.getBody (),  
                 minwidth:100,   
                 handler:function () {   
                     Ext.MessageBox.show ({   
                       title: ' Hint ',  
                       msg: ' You clicked on me. ',  
                       Buttons:Ext.MessageBox.OK,
                       fn:function () {}
                     });  
               }};   
  
 
So when you initialize the button, you should consider initializing the Zeroclipboard. You can see if initialization is complete in the browser console.
-The Zeroclipboard object should exist in the browser after the page load completes.
-Use the Self-band method to view: Zeroclipboard.state ()


-If all goes well, you can see that the Zeroclipboard.state (). Flash.ready value is true. Copy method with Zeroclipboard
Sometimes, we can't set the Data-clipboard-target property to the button, and we can bind the data using the Zeroclipboard copy method.

where SetText () is the simplest and most common method

var clip = new Zeroclipboard ($ ("#copy"));
Clip.settext ($ ("#content"). Val ());
You can set the format in 3, with the content of the format pasted to different programs, showing the corresponding effect
clip.settext ("copied content");
clip.sethtml ("<p> copy Content </p>");
Clip.setrichtext ("{\\rtf1\n{\\b copied content}}");
 
There is also a common set of methods SetData ()

Clip.setdata ("Text/plain", "copied content");
Clip.sedata ("text/html", "<p> copy Content </p>");
Clip.setdata ("Application/rtf", "{\\rtf1\n{\\b copied content}}");
 
ZeroClipboard2 First copy does not take effect: 
In combination with ZeroClipboard2 and ExtJS, I found that the first time the copy does not work, you need to click the Second Copy button to achieve the effect of replication. After thinking about it, I used the SetText () method when I was binding the data, and the method set the data to be one-time, using this method to set the copied data to take effect only the next time the copy was done. After that, even if you click the Copy button, you are no longer performing replication unless you call the SetText () method again.
To solve this problem, we used the event copy in the button's callback function to use the SetData () method instead:

Clip.on ("Copy", function (e) {
    e.clipboarddata.setdata ("Text/plain", "copied text")
});