Use Zeroclipboard.js with Meteor.js

Question

An attempt to get Zeroclipboard.js to work in the Meteor application is as an example here: http://www.thewebflash.com/2014/10/copy-to-clipboard-cross-browser-using.html .

I have the latest ZeroClipboard.js and ZeroClipboard.swf in the Client folder.

In my template, I:

<template name="listPage">
<!-- some other markups -->
<input type="text" id="input1" />
<button type="button" id="btn-copy1" class="btn-copy">Copy to Clipboard</button>
<span class="span-message"></span>
</template>

Event couple:

Template.listPage.events({
'click .btn-copy': function(e) {
    e.preventDefault();
    var client = new ZeroClipboard($('.btn-copy'));

    client.on('ready', function(event) {
        client.on('copy', function(event) {
            // `this` === `client`
            // `event.target` === the element that was clicked

            // Get the text content of <input> or <textarea> that comes immediately before the clicked button
            var $prevEle = $(event.target).prev();
            var text = $prevEle.is('textarea') ? $prevEle.val().replace(/\n/g, '\r\n') : $prevEle.val();

            // If value of `text` is not empty, set the data to clipboard
            if (text) {
                event.clipboardData.setData('text/plain', text);
            }
        });

        client.on('aftercopy', function(event) {
            // Check if copied text is not empty
            if (event.data["text/plain"]) {
                // Call something on successful copying
                $(event.target).next().stop().css('opacity', 1).text('Copied!').fadeIn(30).fadeOut(1000);
            }
        });
    });

    client.on('error', function(event) {
        ZeroClipboard.destroy();
    });
  }
});

I also tried a simple example https://github.com/zeroclipboard/zeroclipboard

Not sure what I'm doing wrong. Help is appreciated.

Answer 1

you may have put zeroclipboard.swf in the wrong place.

check the copy button in the browser. if it new ZeroClipboard($('.btn-copy'))worked fine, you'll see something like this.

<object id="global-zeroclipboard-flash-bridge" 
name="global-zeroclipboard-flash-bridge" 
type="application/x-shockwave-flash" 
data="http://localhost:3000/client/lib/ZeroClipboard.swf?noCache=1432275841705" 
height="100%" width="100%">.........</object>

ZeroClipboard.swf. /client/lib/ZeroClipboard.swf - ZeroClipboard.min.js /client/lib - swf .

, .swf / meteor , . , ZeroClipboard, , .swf / . /client - .

, (new ZeroClipboard($('.btn-copy')))? id selector (#) , .