zeroclipboard無法正常使用的解決辦法

我在網頁裏使用了CKEDITOR和zeroclipboard

 

調試了很久，發現只要調用了CKEDITOR那麼zeroclipboard就出現異常，沒有報錯信息，後來發現是“複製”按鈕上方覆蓋的flash位置不對，點“複製”按鈕時，並沒有點到flash按鈕，錯位了。

 

在解決的過程中，使用了很多版本的zeroclipboard，並且在網上找了很多代碼，最後發現，不同版本的zeroclipboard，調用代碼時的語法都不一樣，在js控制檯很容易報錯。

最後解決辦法的方法很簡單：

我的網頁中有多個“複製”按鈕，分別對應複製不同的文本。其實這個需求使用最新版本的zeroclipboard很容易就能解決，並且不存在flash定位出錯的情況。

參考資料：https://github.com/zeroclipboard/zeroclipboard/blob/master/docs/instructions.md

這是zeroclipboardv2.x  的，最新的，也很好用。它的語法和舊版不一樣。

http://zeroclipboard.org/index-v2.x.html   這裏是官方的主頁，可以下載。

 

<script type="text/javascript" src="ZeroClipboard.js"></script>

<div id="abcc" class="demo">  
    <blockquote id="copytext" name="codeiframe" rows="5" cols="60">j啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</blockquote>  
    <input type="button" value="" id="copy" class="copy"  data-clipboard-target="copytext"/>  

    <input type="text" value="2222222222222222" id="text2"/>
<input type="button" value="複製2" id="copy2" class="copy" data-clipboard-target="text2" />  
</div>  


<script type="text/javascript">

    $(function () {
        $(".copy").each(function () {
            ZeroClipboard.config( { swfPath: 'ZeroClipboard.swf' } );
            var clipp =  new ZeroClipboard( $('.copy') );
            });
    });

var oEditor = CKEDITOR.replace('TYlists.Content', {
    extraPlugins: 'autogrow',
    autoGrow_maxHeight: 1000
});
    
        </script>
</div>