Cross-browser copy artifact Zeroclipboard 2.x Quick Start detailed

Cross-browser copy artifact Zeroclipboard 2.x Quick Start detailedTechnical Tutorials September 15, 2014 No comments

In some cases, we want the user to be able to automatically copy the specified content to the Clipboard on the user's computer by completing an action on the Web page. For security reasons, however, most modern browsers do not provide a common Clipboard replication interface (or, if so, it is disabled by default). Only Internet Explorer can be copied in the following ways.

Window.  Clipboarddata.  SetData("text","Here is the textual content that needs to be copied")        

To achieve cross-browser replication, we can use Zeroclipboard.

Zeroclipboard and its principle introduction

Zeroclipboard was developed by the great gods of foreign countries. A JS plugin for clipboard replication, which is based on Flash for cross-browser replication. When we use Zeroclipboard, it hides a small Flash movie (SWF) silently, without affecting our user interface. We just have to use it for replication. The "Zero" in Zeroclipboard refers to "invisible, 0 interference".

Starting with Flash 10, however, due to browser and flash security restrictions, users must perform real operations on the Flash area to manipulate the Clipboard. So the author of Zeroclipboard thought of a way: it makes Flash transparent so that we can place it anywhere we want, such as links, buttons, and so on. In this way, the user interface does not appear to change, and when clicked on a link or button, the actual click Is Flash, which enables the copy operation.

Zeroclipboard Quick Start

Using the Zeroclipboard method is very simple, we just need to introduce a JS file in the page and a little configuration (the simplest one line of code) can (in fact, we need to introduce a Flash SWF file, but Zeroclipboard will introduce it automatically).

Please refer to the sample code below:

Note: Here is the current version of the latest Zeroclipboard 2.1.6 usage, 2.x versions can be referenced, but 1.x usage is not the same!
Zeroclipboard 2.x in principle is not compatible with IE 6 ~ ie 8 and other low-version IE browser, if you need to be compatible with IE 6 ~ ie 8, please use 1.x or 2.0.2 version (for details, please refer to the official link in the comments below), we recommend using the 2.0.2 version.
In addition, due to the security limitations of the Flash local sandbox, the following code will not work properly if it is opened directly by the browser in the local HTML file .

<!--here is the HTML code section--
<textarea Id="Content" Rows="10" Cols="60">Here are the things to copy</textarea>
<input Id="Copy" Type="Button" Data-clipboard-target="Content" Value=Copy>


<!--here is the JS code section--
<script Type="Text/javascript" Src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/zeroclipboard.min.js" ></script> 
 <script type= "text/javascript" >  
 //the Copy button acts as an element carrier for copying data  
 var clip = new  Zeroclipboard ( Document. Getelementbyid ( "copy" )  
 </SCRIPT>           

The above is the simplest code that introduces and uses Zeroclipboard. We specify a property for the Copy button data-clipboard-target whose value is the element ID of the data that will be copied. At this point, we can copy the text data in the textarea with the Content ID by clicking on the "Copy" button. You can click here to run the code

Zeroclipboard important matters about file introduction and localization use

The JS file we introduced above is an official CDN provided by Zeroclipboard, which you can use directly. If you want to download it to a local server for use, you can download the latest version from the official website. Then upload the dist directory ZeroClipboard.js (or the compressed version of ZeroClipboard.min.js) and ZeroClipboard.swf the two files to your server.

Make sure that they are placed in the same directory so that the zeroclipboard.swf file is automatically loaded by Zeroclipboard.js. Otherwise you need to configure the path of the SWF file before using it.

Before new Zeroclipboard (), the path to the zeroclipboard.swf file needs to be configured first
Zeroclipboard.  Config({ swfpath:' http://YOURSERVER/path/ZeroClipboard.swf '});     

Multiple Replication vectors

If you want to have multiple buttons, links, and other elements in your page that act as vectors for copying data, you can pass in multiple elements as an array (or array of classes). Here are a few ways to do this:

Mode one (Generate multiple Zeroclipboard objects, suitable for different vectors to replicate data from different sources)
VarClip= New Zeroclipboard(Document.getElementById("Copy") );
VarClip2= New Zeroclipboard(Document.getElementById("Copy2") );


Mode two (Generate a Zeroclipboard object, suitable for different vectors to replicate data from the same source)
VarDoms= [Document.getElementById("Copy"), document.  getElementById("Copy2") ];
var doms = document.getelementsbyname ("copy"); It is also possible to get multiple elements through byname or bytagname
var doms = $ (". Copy"); It's also possible to use jquery objects
An object that accesses a DOM element through a numeric index is possible as long as the number of elements is accessed through the Length property.
var clip = new zeroclipboard( doms );      

Change replication vectors

If you used button 1 to act as a copy vector, now you want to add "button 2" to act as a copy carrier. You can call the clip () method of the Zeroclipboard instance:

var clip = new zeroclipboard ( Document.< Span class= "PLN" >getelementbyid ( "copy" )  
 //add an element with an ID of copy2 as a copy vector, the original ID copy element is still available  
 Clipclip ( Document. Getelementbyid ( "copy2" /* can also be passed in as an array of multiple */        

If you want to uninstall the specified replication vector, you can use the unclip() method.

Cancels the replication feature registered on an element with ID Copy2
Clip.  Unclip( document.  getElementById("Copy2")/* can also be passed in array form (multiple */ );

Does not specify any parameters, the copy function that is registered on all elements before canceling the object
Clip.  Clip();  

Set the text data for replication

If a property is specified data-clipboard-target , Zeroclipboard will then attempt to get the text data through the element's value, Textcontent, and InnerText properties (in turn, determine if there are any of the above attributes, whichever is the most previous).

Of course, Zeroclipboard is not the only way to get text data for replication through other elements, we can also set the copy vector's own properties to copy data-clipboard-text the text data, after which you can also set the property value (SetAttribute ()) To change the text content that you want to copy.

<inputid="Copy"type="button"data-clipboard-text="Here is the content for copying, Codeplayer "Value=" Copy ">           

In addition, we don't even have to set the text data for replication through the attributes of the element node, we can use the Zeroclipboard object's setText() method to set the text data directly. Note that the data set by this method is one -time, and after you use this method to set the replication data, only the next copy operation takes effect. After that, even if you click the Copy button and no longer perform the copy, unless you call setText() the method again (you can bind the copy (the "copy") event to invoke the method, so that each copy operation sets the data, as we will see below).

Clip.  SetText("Set text content for Replication");    

the priority of the data source : If we set a property for the replication vector at the same time, data-clipboard-text data-clipboard-target and call the setText() method, then the priority of Zeroclipboard replication data is: SetText () > Data-clipboard-target > Data-clipboard-text.

If the former has no text data (no call, no attributes, or no data is an empty string), then one of the following priority levels is not copied if there is no text data.

For example, if you set the above three at the same time. First copy: setText() sets the data first, if it is an empty string, the data-clipboard-target corresponding element of the data, if it is also an empty string, the data-clipboard-text text data of the property is taken, if it is also an empty string, it is not copied. Note that because the setText() data set is one -time, the next copy will be the data-clipboard-target attribute (unless the method is called again setText() ).

Data type

As is known to all, the data in the Clipboard is of a type, and each type can have its own data. There are several types of data that we can copy, and when we paste it, we paste the data of the current program's acceptable type.

Zeroclipboard also supports the setting of multiple types of clipboard data. It provides us with the SetText (), sethtml, Setrichtext () Methods for setting up plain text data, HTML content, and Rich text content, respectively.

Can be set at the same time, paste the different content according to the receiving program, and paste the different contents
Clip.  SetText("Codeplayer");
Clip.  sethtml("<strong>CodePlayer</strong>");
Clip.  Setrichtext("{\\rtf1\\ansi\n{\\b Codeplayer}}");    

In addition, Zeroclipboard provides a common setup method setData() for setting various types of data.

Can be set at the same time, paste the different content according to the receiving program, and paste the different contents
Clip.  SetData("Text/plain","Codeplayer");
Clip.  Sedata("text/html","<strong>CodePlayer</strong>");
Clip.  SetData("Application/rtf","{\\rtf1\\ansi\n{\\b Codeplayer}}");     

Event handling

Zeroclipboard also provides us with event support to handle various events triggered by Zeroclipboard. The events supported by Zeroclipboard are "ready", "beforecopy", "Copy", "Aftercopy", "Destroy", "error".

We can on() register the event handler function by means of the method.

Triggers the ready event when the Flash SWF file is loaded and ready
Clip.On("Ready", function () { Alert ( "Loading complete!")  });  
 
 //set text data for replication when the copy event is triggered  
 Clip on ( "copy" , function (e 
     E.. Setdata ( "Text/plain" ,  "Here is the plain text data for copying" )  
 });     

In addition, the off() method is used to unregister the event handler function, which is emit() used to trigger the event manually. Its usage is very similar to the on (), Off (), and Trigger () methods of jquery.

Also, if you have multiple Zeroclipboard objects, you want to register event handlers for them. You can ZeroClipboard.on() ZeroClipboard.off() set events globally by using the static methods of the global object Zeroclipboard ZeroClipboard.emit() . Global events will take effect for each object.

For detailed usage of event handling, refer to the Zeroclipboard event and its attribute details.

Zeroclipboard Chinese API documentation

• Zeroclipboard 2.x global object properties and methods, and detailed API for all events
• Zeroclipboard properties and methods for 2.x instance objects
• All configuration options for Zeroclipboard 2.x

Cross-browser copy artifact Zeroclipboard 2.x Quick Start detailed