Confluence：复制到剪贴板按钮

Question

我正在使用Confluence 5.10.8。在一些页面上，我有几个文本片段需要读者复制到剪贴板。对于这些文本片段中的每一个，我希望能够添加一个不可编辑的文本字段和一个按钮，以便在单击时将文本复制到剪贴板，可能像这样：

我希望您能提供一些视觉反馈来指示文本已被复制。

我认为 user macro 是正确的选择，对吗？类似于（尚未复制）：

## @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>

- Marcus

Answer 1

我使用 clipboard.js 成功解决了这个问题。我不确定为什么，但是在宏中直接添加 <script> 标签时无法正常工作。因此，我将其添加到以下位置：Confluence 管理 → 自定义 HTML → 编辑（/admin/editcustomhtml.action）→ 添加到 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管理 → 用户宏（/admin/usermacros.action）→ 创建用户宏

## 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>

备注：

注意：

• 在我的第一次尝试中，我使用了参数但没有正文。但事实证明，模板变量不能用于宏参数。因此，宏的使用非常有限。因此，我删除了参数并启用了正文。

• 正文处理必须设置为已渲染。我也尝试了其他选项（已转义和未渲染），但这些选项与模板变量不兼容。

• 我用一个简单的替换了初始文本字段，以便能够启用换行。这也解决了正文中的"字符问题。

• 我使用font-awesome的<link>来添加一些图标（剪贴板和复选框）。在第一次尝试中，我将<link>添加到自定义HTML页面上的该字段中（因为还有剪贴板<script>），但是然后宏预览没有图标，因此看起来损坏了。因此，我决定直接将其添加到宏中。

• 在编辑Confluence页面时，您可以使用Ctrl+Shift+A，然后输入宏名称。在同一页上多次使用似乎效果良好。也适用于模板参数。

- Marcus