融合：复制到剪贴板按钮

本文介绍了融合：复制到剪贴板按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

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="cdnjs.cloudflare/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>

推荐答案

我能够使用 clipboard.js 。我不确定为什么，但是在直接将< script> 标记添加到宏时，它不起作用。因此，我改为将其添加到：

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:

合流管理→自定义HTML→编辑（/admin/editcustomhtml.action）→正文末尾

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="cdnjs.cloudflare/ajax/libs/clipboard.js/2.0.1/clipboard.min.js"></script>

融合管理→用户宏（/admin/usermacros.action）→创建用户宏

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: stackoverflow/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="cdnjs.cloudflare/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>

备注：

• 在我的第一次尝试中，我使用了一个参数，但没有body。但是随着的出现，模板变量无法在宏参数中使用。因此，宏的用法非常有限。因此，我删除了参数并启用了正文。

• 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 必须设置为 Rendered 。我还尝试了其他选项（转义和未渲染），但这些选项无法与模板变量一起使用。

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.

我使用了超棒的< link> 带有一些图标（剪贴板和正方形）。在第一次尝试时，我添加了< link> 到自定义HTML页面上的字段（因为还有剪贴板 < script> ），但是宏预览没有图标，因此看起来坏了，所以我决定将其直接添加到宏中。

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.

在编辑汇合页面时，您可以与 Ctrl + Shift + A 一起使用，然后输入宏名称。 也可用于模板参数。

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.