融合:复制到剪贴板按钮 [英] Confluence: copy to clipboard button
问题描述
我正在使用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="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>
推荐答案
我能够使用 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="https://cdnjs.cloudflare.com/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: 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>
备注:
-
在我的第一次尝试中,我使用了一个参数,但没有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.
这篇关于融合:复制到剪贴板按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!