Confluence：复制到剪贴板按钮

Question

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

我还需要一些视觉反馈来表明文本已被复制。

我认为用户宏是执行此操作的正确选择，对吧？类似的东西（尚未复制）：

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

Answer 1

我能够使用Clipboard.js解决这个问题。<script>我不知道为什么，但将标签直接添加到宏时它不起作用。所以我把它添加到：

\n\n

Confluence 管理 \xe2\x86\x92 自定义 HTML \xe2\x86\x92 编辑 ( /admin/editcustomhtml.action ) \xe2\x86\x92 在正文末尾

\n\n

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

\n\n

Confluence 管理 \xe2\x86\x92 用户宏 ( /admin/usermacros.action ) \xe2\x86\x92 创建用户宏

\n\n

## Macro title: text to copy\n## Macro has a body: Y\n## Body processing: Rendered\n##\n## Developed by: /sf/users/136377671/\n## Date created: 2018-06-28\n\n## @param AllowLineWrap:type=boolean|default=false\n\n## strip tags (in case they were pasted) to remove any formatting\n#set ($body = $body.replaceAll("<.*?>",""))\n\n#if ($paramAllowLineWrap == true)\n    #set ($whitespace = "normal")\n#else\n    #set ($whitespace = "nowrap")\n#end\n\n<!-- for the clipboard icon etc. -->\n<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">\n\n<script> \nwindow.onload=function()\n{\n    var clipboard = new ClipboardJS(\'.copy-text-button\');\n    clipboard.on("success", function(e) \n    {\n        console.log(e);\n        var button = $(e.trigger);\n        var title = button.prop("title");\n        button.addClass("fa-check-square");\n        button.html(" copied to clipboard");\n        function reset() \n        {\n            button.removeClass("fa-check-square") \n            button.html("");\n        }\n        window.setTimeout(reset, 5000);\n    });\n    clipboard.on(\'error\', function(e) { console.log(e); }); \n}\n</script>\n\n<span class="panel" style="white-space: $whitespace;font-family:monospace;font-size:1em">\n    <span class="panelContent">$body</span>\n    <button class="copy-text-button fa fa-clipboard" data-clipboard-text="$body" title="click to copy">\n</span>\n

\n\n

评论：

\n\n

\n

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

\n

• 主体处理必须设置为渲染。我还尝试了其他选项（转义和未渲染），但这些选项不能与模板变量一起使用。

\n

• 我用一个简单的跨度替换了初始文本字段，以便能够启用换行。这也解决了"身体角色的问题。

\n

• 我使用很棒的字体<link>来显示一些图标（剪贴板和\n检查方块）。第一次尝试时，我将 添加<link>到自定义 HTML 页面上的\n字段（因为还有剪贴板\n <script>），但宏预览没有图标，因此看起来\n已损坏。所以我决定直接将其添加到宏中。

\n

• 在编辑汇合页面时，您可以将其与\n Ctrl+ Shift+一起使用A，然后输入\n宏名称。似乎可以很好地在同一页面上进行多次使用。\n也可以使用模板参数。

\n

\n