Box to Copy Code / Embed HTML or JavaScript in Confluence
Asked by Carola Buenz:

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


Answers:
author: ltmacbank
body: 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 textsome 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>
```

comments: author: FDMatthias
body: 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\]


author: Haas
body: 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.


author: testy me
body: Interesting .

comments: author: Nemanja Radevic
body: 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


author: Bosco Fernandes
body: 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


author: David at David Simpson Apps
body: 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](http://davidwalsh.name/dw-content/ZeroClipboard.js)" to wherever you've uploaded the JS to

comments: author: Carola Buenz
body: Hi,

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

Carol


author: David at David Simpson Apps
body: Carol, without admin rights, you're likely in trouble. Perhaps you could ask an administrator?


author: Davin Studer
body: Here is link to the ZeroClipboard project ... rather than to David Walsh.

[](http://zeroclipboard.org/)<http://zeroclipboard.org/>


author: Andres Leon-Rangel
body: is been 4 years and the page says that the project will come soon. Any idea of how useful this is?