wordpress中ZeroClipboard实现js+flash跨浏览器剪切板复制粘贴
作者：matrix 被围观: 2,639 次 发布时间：2013-09-16 分类：Wordpress 零零星星 | 无评论 »
用ZeroClipboard跨浏览器实现复制到剪切板，兼容ie、chrome、firefox等等支持flash的浏览器。
ZeroClipboard以前在google代码的项目404，发现个神似ZeroClipboard的zClip 项目：http://www.steamdev.com/zclip/
其余项目：可以参考http://zeroclipboard.org/
网上关于ZeroClipboard的有很多，有些不能用 看着也杂~
下面记录自用ZeroClipboard的代码。点击查看最新版本的简单设置
ZeroClipboard version: "1.0.7"
js和swf下载：
http://www.400gb.com/file/28619600
http://pan.baidu.com/share/link?shareid=3611655227&uk=3238236832
步骤：
1.修改压缩包中zpCOPY.js的第九行：
moviePath: 'zpCOPY.swf', // URL to movie
确保zpCOPY.swf路径的正确，建议使用绝对地址（形如https://www.hhtjim.com/zpCOPY.swf）。
2.在需要调用复制的页面加入js代码：
<script type="text/javascript" src="https://www.hhtjim.com/zpCOPY.js"></script>
<script type="text/javascript">
var clip = null;
function $(id) { return document.getElementById(id); }
function init() {
clip = new ZeroClipboard.Client();
clip.setHandCursor(true);
clip.setText($('text').value);
clip.glue('anniu');
clip.addEventListener( "complete", function(){
alert("复制成功！");
});
clip.addEventListener( "load", function(client) {
client.movie.title="复制本文固定链接";
});
}
</script>
说明：
第1行的js地址可自定义
第8、9行的text、anniu为第3步代码中对应的id值
第10、11行是复制后的弹窗提示。
3.同上，放在那页面，适当位置添加：
<body onLoad="init()"></body>
<textarea style="display:none" id="text" ><?php the_permalink() ?></textarea>
<a id="anniu" href='javascript:void(0);' title="复制本文链接">+复制链接</a>
说明：
第1行的onLoad="init()"为打开页面即加载init函数。缺少此行会导致加载flash失败。
第2行为需要复制的文本内容。这里的复制的内容是<textarea里的<?php the_permalink() ?>返回的WordPress文章网址。
经测试无法复制其他标签的文字，只有<textarea标签里的可用。由于文本框有点占位置，所以做了隐藏style="display:none"。
第3行为点击复制的那个按钮。
4.之后就成功了。
经本地测试chrome 版本 28.0.1500.95 m、ie10、firefox 23.0.1 复制成功！
本地测试于NGRO主题 💡
弹窗提示
参考：http://www.myext.cn/webkf/27383.html
http://keleyi.com/a/bjac/3wjq3xm2.htm
zclip DEMO：http://www.steamdev.com/zclip/
需要调用JQ库和zclip.min.js：
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://file.icycat.com/view/js/jquery.zclip.min.js"></script>
然后是复制的按钮和文本代码：
<a type="button" id="anniu" class="btn" > 复制 </a>
<a style="display:none" id="wenben"> 复制：https://www.hhtjim.com </a>
<script type="text/javascript">
$(document).ready(function(){$("#anniu").zclip({path:"http://file.icycat.com/view/js/ZeroClipboard.swf",copy:$("#wenben").text(),afterCopy:function(){$(this).css("color","#777");$(this).text("复制成功")}})});
</script>
说明：第1行 复制按钮为 id="anniu"
第2行 复制的文本是 id="wenben"的内容
3-4行 加载配置的swf文件路径，复制按钮、复制的文本ID以及复制成功后变成“复制成功”的样式。
代码参考来自：http://file.icycat.com/
