Problem mit ZeroClipboard zum Kopieren von Text mit zClip-Bibliothek

Question

Ich habe Probleme beim Kopieren von Text mit Zeroclipboard. Das ist mein HTML-Code:

<dl class="codebox"><dt>Code: <a href="#" onclick="selectCode(this); return false;">Select all</a> | <a id="copytxt" href="#" onclick="return false;" class="">Copy to clipboard</a><div class="zclip" id="zclip-ZeroClipboardMovie_1" style="position: absolute; width: 97px; height: 15px; z-index: 99; left: 196px; top: 1032px; "><embed id="ZeroClipboardMovie_1" src="code/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="97" height="15" name="ZeroClipboardMovie_1" align="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&amp;width=97&amp;height=15" wmode="transparent"></div></dt><dd><code>This is my code that I want to copy</code></dd></dl> 

Dies ist mein Code jQuery den Text zu kopieren:

<script type="text/javascript"> 
$(document).ready(function(){ 
     $("#copytxt").zclip({ 
      path: "code/ZeroClipboard.swf", 
      copy: function(){return jQuery(".codebox").find(".prettyprint");} 
     }); 
}); 
</script> 

Dies ist, wo ich Probleme, denn wenn ich die Copy-Link klicken, kopieren es gibt mir eine Alertbox aber es sagt, dass es nichts kopiert hat, das alles bedeutet, ist in Ordnung, außer diesem Teil:

copy: function(){return jQuery(".codebox").find(".prettyprint");} 

ich alles versucht haben, es zu lösen. Ich habe auch ein anderes Problem, der obige Code bettet nur das Zeroclipboard in das erste Element mit der 'Copyxt' ID und nicht alle von ihnen.

Hier ist einer der Orte, wo das Problem (in meinem Forum) auftritt: -removed-

Ich weiß nicht, ob es hilft, aber ich bin mit phpBB. Und ich benutze auch zclip: http://www.steamdev.com/zclip/ für das Zeroclipboard.

Danke.

Answer 1

Der Grund, dass es nur an ein Element mit der copyxt ID anfügt, ist, dass Sie nur ein Element pro Seite mit einer bestimmten ID haben können. IDs müssen eindeutig sein.

Es kopiert wahrscheinlich nichts in die Zwischenablage, da die Option copy: eine Funktion akzeptiert, die Folgendes zurückgibt: "Eine beliebige Zeichenfolge oder ein JavaScript-Ausdruck oder eine JavaScript-Funktion, die eine Zeichenfolge zurückgibt". Ihre Funktion gibt ein jQuery-Objekt zurück, das keine Zeichenfolge ist. Wenn Sie den Text aus dem .prettyprint Elemente wollen (die Sie nicht in Ihrem Beispiel HTML gezeigt haben), dann müssen Sie den Text aus es wie folgt erhalten:

copy: function(){return jQuery(".codebox").find(".prettyprint").text();} 

Wenn Sie es wollen, in mehr arbeiten als eine Stelle, dann verwenden Sie Klassennamen anstelle von ids und verwenden Sie einen Selektor, der alle Objekte mit diesem Klassennamen holt.

Wenn Sie möchten, dass Text relativ zum Link abgerufen wird, auf den geklickt wurde, müssen Sie den Textabrufcode ändern, um Text von einem Objekt abzurufen, das relativ zum angeklickten Objekt ist.

es relativ zu holen, was auf geklickt wurde und mehrere diejenigen zu ermöglichen, arbeiten Sie id="copytxt" zu class="copytxt" und Code verwenden ändern könnte:

<script type="text/javascript"> 
$(document).ready(function(){ 
     $(".copytxt").zclip({ 
      path: "code/ZeroClipboard.swf", 
      copy: function() { 
       return jQuery(this).closest(".codebox").find(".prettyprint").text(); 
      } 
     }); 
}); 
</script> 

Die Zugabe von jQuery(this).closest(".codebox") beginnt die Suche nach dem .prettyprint Objekt beim nächsten Vorfahren, der class = "codebox" bis zum Punkt des Klicks hat. Also, es wird den Vorfahren Baum von wo der Klick passiert ist, finden Sie die Eltern codebox und dann finden Sie die prettyprint in dieser Codebox.

Die Änderung an $(".copytxt").zclip ermöglicht es, alle Objekte mit class="copytxt" anstatt nur ein Objekt mit id="copytxt" zurückzugeben.