5

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:

enter image description here

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>

1 Answer 1

1

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

<!-- used by copy-text user macro to copy stuff to the clipboard -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.1/clipboard.min.js"></script>

Confluence administration → User Macros ( /admin/usermacros.action ) → Create a User Macro

## Macro title: text to copy
## Macro has a body: Y
## Body processing: Rendered
##
## Developed by: https://stackoverflow.com/users/1948252/
## Date created: 2018-06-28

## @param AllowLineWrap:type=boolean|default=false

## strip tags (in case they were pasted) to remove any formatting
#set ($body = $body.replaceAll("<.*?>",""))

#if ($paramAllowLineWrap == true)
    #set ($whitespace = "normal")
#else
    #set ($whitespace = "nowrap")
#end

<!-- for the clipboard icon etc. -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<script> 
window.onload=function()
{
    var clipboard = new ClipboardJS('.copy-text-button');
    clipboard.on("success", function(e) 
    {
        console.log(e);
        var button = $(e.trigger);
        var title = button.prop("title");
        button.addClass("fa-check-square");
        button.html(" copied to clipboard");
        function reset() 
        {
            button.removeClass("fa-check-square") 
            button.html("");
        }
        window.setTimeout(reset, 5000);
    });
    clipboard.on('error', function(e) { console.log(e); }); 
}
</script>

<span class="panel" style="white-space: $whitespace;font-family:monospace;font-size:1em">
    <span class="panelContent">$body</span>
    <button class="copy-text-button fa fa-clipboard" data-clipboard-text="$body" title="click to copy">
</span>

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.