Box to Copy Code / Embed HTML or JavaScript in Confluence

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

3 answers

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]

0 votes
David Simpson Community Champion Oct 05, 2011

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


&lt;script type="text/javascript" src="http://davidwalsh.name/dw-content/ZeroClipboard.js"&gt;&lt;/script&gt;
&lt;textarea name="box-content" id="box-content" rows="5" cols="70"&gt;
  $body
&lt;/textarea&gt;
&lt;br /&gt;&lt;br /&gt;
&lt;p&gt;&lt;input type="button" id="copy" name="copy" value="Copy to Clipboard" /&gt;&lt;/p&gt;

Amend "http://davidwalsh.name/dw-content/ZeroClipboard.js" to whereever you've uploaded the JS to

Hi,

thanks, but i have no rights to create a new user macro - is there any other way?

Carol

David Simpson Community Champion Oct 18, 2011

Carol, without admin rights, you're likely in trouble. Perhaps you could ask an administrator?

Davin Studer Community Champion Apr 03, 2014

Here is link to the ZeroClipboard project ... rather than to David Walsh.

http://zeroclipboard.org/

is been 4 years and the page says that the project will come soon. Any idea of how useful this is?

Interesting .

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
The above are just comments right? they have nothing to do with the actual name of the plugin...i named mine copytoclipboard
but it never appeared in my option when i clicked insert macro
please advice

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

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted Oct 24, 2018 in Confluence

Atlassian Research opportunity with Confluence templates

Do you use templates with Confluence? Take part in a remote 1-hr workshop. You'll receive USD $100 for your time!   We're looking for people to participate in a   remote 1-hr workshop...

1,179 views 20 14
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you