Hi,
im using confluence and like to embed an "Copy Box" - a box which contains Text oder Code, which is automatically copied to my clipboard by clicking on a button. Like this: http://davidwalsh.name/clipboard
Is this possible?
Thanks for help!
Carol
You just need to create a html macro and embed the below in it, replacing the text in the pre section with what you want on your page to be copied.
<!-- 1. Define some markup --> <pre id="foo" style="border:1px solid Grey; display: inline-block;"> some text some text </pre> <!-- Trigger --> <button class="btn" data-clipboard-target="#foo" alt="Copy to clipboard">Copy to Clipboard</button> <!-- 2. Include library --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.16/clipboard.min.js"></script> <!-- 3. Instantiate clipboard by passing a string selector --> <script> var clipboard = new Clipboard('.btn'); clipboard.on('success', function(e) { console.log(e); }); clipboard.on('error', function(e) { console.log(e); }); </script>
I had to put this in an html macro like you said, but as unicode and not as html character codes. Probably because of an update in confluence.
I also splitted it up so i can add the needed scripts at the top of the page and then use it everywhere i want in the page.
In addition, I replaced the text of the copy button to an icon to save space and make it more attractive if you have like 10 of these buttons on a page.
Final result for those who want it:
[HTML MACRO]
<!-- 1. Include libraries -->
<!-- 1a. Include font-awesome for the copy icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 1b. Include the copy library -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.16/clipboard.min.js"></script>
<!-- 2. Instantiate clipboard by passing a string selector -->
<script>
var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) { console.log(e); });
clipboard.on('error', function(e) { console.log(e); });
</script>
[/HTML MACRO]
and then I can use it everywhere with the following
[HTML MACRO]
<!-- 3. Define some markup -->
<pre id="foo" style="border:1px solid Grey; display: inline-block;"> some text some text </pre>
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo" alt="Copy to clipboard"><i class="fa fa-copy"></i></button>
[/HTML MACRO]
[HTML MACRO]
<!-- 3. Define some markup -->
<pre id="bar" style="border:1px solid Grey; display: inline-block;"> some other text some other text </pre>
<!-- Trigger -->
<button class="btn" data-clipboard-target="#bar" alt="Copy to clipboard"><i class="fa fa-copy"></i></button>
[/HTML MACRO]
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
This looks cool. However, since there is no possibility to create your own macros on the cloud version, I wonder if there is any other way to achieve this.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Just wondering did this work for anyone that has tested it?
I tried to create the user macro as suggested and the comments
## Macro title: copy-textarea
## Macro has a body: Y
## Body processing: Unrendered
## Output: Selected output option
##
## Developed by: Him
## Date created: 2011-10-06
## Installed by: My Name
## This is a Copy to Clipboard macro
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You would need to set the macro parameters ## @param MYNAME:title=MY TITLE|type=MY TYPE|desc=MY DESCRIPTION|required=true|multiple=true|default=MY DEFAULT VALUE
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
If this is something you'd like to do quickly, attach the JavaScript and SWF files to a publically accessible Confluence page and create a user macro...
Something like this (untested) seems reasonable:
## Macro title: copy-textarea ## Macro has a body: Y ## Body processing: Unrendered ## Output: Selected output option ## ## Developed by: Him ## Date created: 2011-10-06 ## Installed by: My Name ## This is a Copy to Clipboard macro <script src="https://davidwalsh.name/dw-content/ZeroClipboard.js></script> <textarea name="box-content" id="box-content" rows="5" cols="70">$body</textarea> <p><input type="button" id="copy" name="copy" value="Copy to Clipboard" /></p>
Amend "https://davidwalsh.name/dw-content/ZeroClipboard.js" to wherever you've uploaded the JS to
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi,
thanks, but i have no rights to create a new user macro - is there any other way?
Carol
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Carol, without admin rights, you're likely in trouble. Perhaps you could ask an administrator?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Here is link to the ZeroClipboard project ... rather than to David Walsh.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
is been 4 years and the page says that the project will come soon. Any idea of how useful this is?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.