Kopier tekst til klippebordet med ZeroClipboard

16290425_sZeroClipboard benytter en skjult flash fil som ‘motor’ – dermed er det lykkedes at lave en funktion der virker i alle browsere.

Step 1: Importer ZeroClipboard script og flash filen som fileressources. Bemærk at ZeroClipboard fra version 1.1.0 ikke længere virker sammen med Dojo. Benyt i stedet en tidligere version, f.eks. ZeroClipboard-1.0.7

Step 2: Lav din XPage

Først skal javascript filen inkluderes

<xp:this.resources>
	<xp:script src="/ZeroClipboard.js" clientSide="true"></xp:script>
</xp:this.resources>

Så skal ZeroClipboard loades og initialiseres i en Script block

<xp:scriptBlock id="scriptBlock">
	<xp:this.value><![CDATA[
var clip = null;

dojo.addOnLoad( function() {
	clip = new ZeroClipboard.Client();
	clip.setHandCursor( true );
          clip.setText( "#{javascript:'Some SSJS to generate the text to copy'}" );
          clip.glue( "#{id:clip_button}" );
	});
]]></xp:this.value>
</xp:scriptBlock>

Tilsidst indsætter du en ‘copy’ knap

<xp:button value="Copy" id="clip_button">
	<xp:eventHandler event="onmouseover" submit="false">
		<xp:this.script><![CDATA[clip.reposition();]]></xp:this.script>
	</xp:eventHandler>
</xp:button>

ZeroClipboard lægger en skjult (transparrent) flash fil hen over din copy knap (det gøres med clip.glue metoden). Hvis siden resizes eller der på anden vise flyttes rundt på side elementer, så kan det ske at flash objektet ikke længere matcher knapper . Dette klares ved at kalde clip.reposition fra en onmouseover event. (hvis flash objektet ligger korrekt, så kaldes knappens events ikke)

Bemærk: Version 1.07 kan også give problemer med Dojo. F.eks. fik jeg ikke umiddelbart DialogBoxen fra Extension Library til at virke sammen med ZeroClipboard. Kunne dog nemt løses ved kun at vise ‘Copy’ knappen i Read mode og dialogboksen i Edit mode.

Links

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *

*