I am using Confluence 5.10.8. On some pages I have several text snippets to be copied to the clipboard by the reader. For each of those text snippets I would like to be able to add a non-editable text field and a button to copy the text to the clipboard when clicking it, maybe like this:
I also need some visual feedback to indicate the text was copied.
I think a user macro is the right thing to do this, right? Something like (does not copy yet):
## @param Text:title=Text|type=string|required=true|desc=The text to be displayed and copied
<!-- font-awesome contains the clipboard icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<span style="white-space: nowrap">
<input type="text" value="$paramText" size="$paramText.length()" readonly>
<button class="fa fa-clipboard" title="click to copy">
</span>
I was able to solve this using clipboard.js. I am not sure why, but it did not work when adding the
<script>
tag directly to the macro. So instead I have added it to:Confluence administration → Custom HTML → Edit ( /admin/editcustomhtml.action ) → At the end of the BODY
Confluence administration → User Macros ( /admin/usermacros.action ) → Create a User Macro
Remarks:
In my first attempt I used a parameter and no body. But as it turned out, template variables cannot be used in macro parameters. So the usage of the macro was very limited. Therefore I removed the parameter and enabled the body.
Body Processing has to be set to Rendered. I also tried the other options (Escaped and Unrendered), but those did not work together with template variables.
I replaced the initial text field by a simple span to be able to enable line wrap. This also solved issues with
"
characters in the body.I use that font-awesome
<link>
to have some icons (clipboard and check-square). At the first attempt I added the<link>
to that field on the Custom HTML page (because there is also the clipboard<script>
), but then the macro preview had no icon and thus looked broken. So I decided to add it directly to the macro.On editing a confluence page you can use it with Ctrl+Shift+A and then enter the macro name. Seems to work well with multiple usage on the same page. Also works with template parameters.