Confluence: copy to clipboard button

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

<!-- 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.

来源：https://stackoverflow.com/questions/51100213/confluence-copy-to-clipboard-button

标签

confluence