Box to Copy Code / Embed HTML or JavaScript in Confluence

[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

[ltmacbank]

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>

[FDMatthias]

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]

[Haas]

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.

[testy me]

Interesting .

[Nemanja Radevic]

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

[Bosco Fernandes]

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

[David at David Simpson Apps]

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

[Carola Buenz]

Hi,

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

Carol

[David at David Simpson Apps]

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

[Davin Studer]

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

http://zeroclipboard.org/

[Andres Leon-Rangel]

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