将Zeroclipboard.js与Meteor.js一起使用

Question

尝试使zeroclipboard.js在流星应用程序中工作，以下示例：http：//www.thewebflash.com/2014/10/copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-copy-cophoble-cross-cross--cross--cross--cross--浏览器 - using.html。

我在客户端文件夹中有最新的zeroclipboard.js和zeroclipboard.swf。

在我的模板中我有：

<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>

与事件配对：

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, 'rn') : $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();
    });
  }
});

我还尝试了https://github.com/zeroclipboard/zeroclipboard上的简单示例

不确定我在做什么。非常感谢帮助。

Answer 1

您可能已经将zeroclipboard.swf放在错误的位置。

在浏览器"复制按钮"中检查。如果new ZeroClipboard($('.btn-copy'))正常工作 - 您会看到这样的东西。

<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放入流星项目的/公共文件夹中，并在那里创建匹配该路径的子文件夹。我相信，创建新的Zeroclipboard实例可以显式设置此路径时可以选择 - 但是.swf必须居住在/公共文件夹中。当它在/客户端文件夹中 - 不可用。

另外，您确定它将与类选择器（new ZeroClipboard($('.btn-copy'))）一起使用吗？ID选择器（#）返回单个项目，类选择器返回数组。