Question

尝试让Zeroclipboard.js在Meteor应用程序中运行，例如：http://www.thewebflash.com/2014/10/copy-to-clipboard-cross-browser-using.html。

我在Client文件夹中有最新的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, '\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();
    });
  }
});

我还尝试了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放入meteor项目的/ public文件夹中，并在那里创建与该路径匹配的子文件夹。我相信在创建新的ZeroClipboard实例时可以选择明确设置此路径 - 但.swf必须驻留在/ public文件夹中。当它在/ client文件夹中时 - 它不可用。

另外，你确定它适用于类选择器（new ZeroClipboard($('.btn-copy'))）吗？ id选择器（#）返回单个项，类选择器返回一个数组..

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

1 个答案: