zeroclipboard / jquery.zeroclipboard Goto Github PK

Bind to the `beforecopy`, `copy`, `aftercopy`, and `copy-error` events, custom DOM-like events for clipboard injection generated using jQuery's Special Events API and ZeroClipboard's Core module.

Home Page: http://plugins.jquery.com/zeroclipboard/

License: MIT License

JavaScript 95.95% HTML 4.05%

jquery.zeroclipboard's Introduction

⚠️ WARNING!

This library is no longer maintained as it is no longer necessary for modern web development. If you want your frontend JavaScript to manipulate the clipboard, please look into the new HTML Clipboard API (various docs available on MDN) or a small convenience wrapper around it like clipboard.js. Thanks for all your support, this project was a labor of love for many years. ❤️

Note:

This master branch contains the v2.x codebase for ZeroClipboard! For the v1.x codebase, see the 1.x-master branch instead.

ZeroClipboard

The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface. The "Zero" signifies that the library is invisible and the user interface is left entirely up to you.

This is achieved by automatically floating the invisible movie on top of a DOM element of your choice. Standard mouse events are even propagated out to your DOM element, so you can still have rollover and mousedown effects.

Suggestions welcome read over the contributing guidelines.

Setup

To setup the project for local development start with these commands in your terminal.

$ git clone https://github.com/zeroclipboard/zeroclipboard.git
$ cd zeroclipboard/
$ npm install -g grunt-cli
$ npm install
$ grunt

Development

Before submitting a pull request you'll need to validate, build, and test your code. Run the default grunt task in your terminal.

$ grunt

Testing

If you just want to run the tests, run grunt test.

$ grunt test

Limitations

User Interaction Required

Due to browser and Flash security restrictions, this clipboard injection can ONLY occur when the user clicks on the invisible Flash movie. A simulated click event from JavaScript will not suffice as this would enable clipboard poisoning.

Other Limitations

For a complete list of limitations, see docs/instructions.md#limitations.

On that page, you will also find an explanation of why ZeroClipboard will NOT work by default on code playground sites like JSFiddle, JSBin, and CodePen, as well as the appropriate "View" URLs to use on those sites in order to allow ZeroClipboard to work.

Simple Example

<html>
  <body>
    <button id="copy-button" data-clipboard-text="Copy Me!" title="Click to copy me.">Copy to Clipboard</button>
    <script src="ZeroClipboard.js"></script>
    <script src="main.js"></script>
  </body>
</html>

// main.js
var client = new ZeroClipboard( document.getElementById("copy-button") );

client.on( "ready", function( readyEvent ) {
  // alert( "ZeroClipboard SWF is ready!" );

  client.on( "aftercopy", function( event ) {
    // `this` === `client`
    // `event.target` === the element that was clicked
    event.target.style.display = "none";
    alert("Copied text to clipboard: " + event.data["text/plain"] );
  } );
} );

See docs/instructions.md for more advanced options in using the library on your site. See docs/api/ZeroClipboard.md for the complete API documentation.

Here is a working test page where you can try out ZeroClipboard in your browser.

Testing ZeroClipboard Locally

To test the page demo page locally, clone the website repo.

Support

This library is fully compatible with Flash Player 11.0.0 and above, which requires that the clipboard copy operation be initiated by a user click event inside the Flash movie. This is achieved by automatically floating the invisible movie on top of a DOM element of your choice. Standard mouse events are even propagated out to your DOM element, so you can still have rollover and mousedown effects with just a little extra effort.

ZeroClipboard v2.x is expected to work in IE9+ and all of the evergreen browsers. Although support for IE7 & IE8 was officially dropped in v2.0.0, it was actually still technically supported through v2.0.2.

Releases

Starting with version 1.1.7, ZeroClipboard uses semantic versioning.

see releases

License

MIT © James M. Greene Jon Rohan

jquery.zeroclipboard's People

Contributors

Stargazers

Watchers

Forkers

candid-business-communication-solutions symonny sukui123 lwl8851206 hexmedia kuczek minikey nihaoqkl yfix meenalaggarwal tzdesign squall2825 nhuanvn 13632851419 arnaudlewis jonket ssp04 lulubai123 jerrylsxu lly835 lvxinqiao clago beyoursun chenghuanhuan modulexcite findedward keiu wtbf jxbb ayu2012 fakediulei toyuanx michealjou jevoncode zxydaisy nguyenhuy82 momoirocloverz orange8 caosaiqi wenzhou001 frontzhm dennlian wjj1127 flybears javascriptplugins tguow skazkiful daisj alex1221 xuruipro jettyjiang isabella232

jquery.zeroclipboard's Issues

How to set swfPath

When using the regular ZeroClipboard library, I can do something like this:

ZeroClipboard.config({swfPath: '/a/path/to/zeroclipboard/dist/ZeroClipboard.swf'});

How do I do that with jquery.zeroclipboard?

user-populated addition to string

I apologize for logging an "issue" when I really have a request.

http://userpages.bright.net/~toddw/filenames/

This link shows my application utilizing zeroclipboard. It initially worked for me, albeit several browser versions ago (Safari on macOS). Would you have a suggestion or recommendation for how I could pick up a user-generated input and copy that to the clipboard, as well as the rest of the predetermined drop-down menus? As you tell, my programming skills are pretty minimal.

e.data is undefined

hello, thank you for the useful plugin!

I downloaded jquery.zeroclipboard v0.2.0
added to my script, it works, as it copy to the clipboard the value I pass it, but it doesn't seem to behave like in the examples...
if the object passed to my function after 'copy' or 'aftercopy' is triggered is : e , e.data is undefined, and I cannot figure out where data is stored...

This is my implementation:

var mOdj = {
    copy_column : function(e) {

        var 
            rText = [], idx = 0;

        rText[idx++] = 'dummy1';
        rText[idx++] = 'dummy2';
        rText[idx++] = 'dummy2';

        console.log(e);
        // Clear out any existing data in the pending clipboard transaction
            e.clipboardData.clearData();
            // Set your own data into the pending clipboard transaction
        e.clipboardData.setData("text/plain", rText.join("\n"));
        // console.log(e);
        e.preventDefault();
    },

    copy_verify : function(e) {
        console.log(e);
        if (e.success["text/plain"] === true) {
            console.log("Copy succeeded. Yay! Text: e.data["text/plain"]);
        }
        else {
            console.log("Copy failed... BOOOOOO!!!");
        }   
    },

    copy_errors : function(errorEvent) {
        console.log(e);
    }

}

$(document).ready(function(){ 
    $('#container')
        .on('copy', 'img.cClipBtn', mOdj.copy_column)
        .on('aftercopy', 'img.cClipBtn', mOdj.copy_verify)
        .on('copy-error', 'img.cClipBtn', mOdj.copy_errors);

});

inside copy_verify(e), this line:
console.log("Copy succeeded. Yay! Text: e.data["text/plain"]);
returns a e.data undefined error

any idea on what I am missing?

when copying - code in one line

Hello. My site - http://template.promo-gear.itembridge.com/docs/
Plugin works, but the code without hyphens line, all in one line. How do I fix this?

My code:
// initialize zeroclipboard plugin

$('.copy-btn').on('copy', function(e) {
e.clipboardData.clearData();
e.clipboardData.setData("text/plain", $(this).closest('div').find('.copied').text());
showAlertMsg();
e.preventDefault();
});

<script src="js/jquery.min.js"></script>
<script src="js/zeroclipboard/jquery.zeroclipboard.min.js"></script>
<script>
    jQuery(document).ready(function($) {
        $("body").on("copy", ".zclip", function(/* ClipboardEvent */ e) {
                    e.clipboardData.clearData();
                    e.clipboardData.setData("text/plain", $(this).data("zclip-text"));
                    e.preventDefault();
                });
    });
</script>