It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

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]

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.

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

Hi,

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

Carol

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

Davin Studer Community Leader 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
TAGS

Community Events

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

Find an event

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

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you