代码之家 › 专栏 › 技术社区 › Marcus

汇合:复制到剪贴板按钮

confluence

2

Marcus · 技术社区 · 8 年前

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

@param text:title=text type=string required=true desc=the text to be displayed and copied
<link rel=“stylesheet”href=“https://cdnjs.cloudflare.com/ajax/libs/font-awome/4.7.0/css/font-awome.min.css”>
<input type=“text”value=“$paramText”size=“$paramText.length()”只读>单击文本时,希望能够添加一个不可编辑的文本字段和一个将文本复制到剪贴板的按钮,可能如下所示:





我想Auser 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>

1 回复 | 直到 8 年前

1

Marcus 8 年前

我可以用 clipboard.js <script> 直接标记到宏。所以我把它添加到:

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

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

参数并启用主体。
必须设置为
为了能够启用换行,我将初始文本字段替换为一个简单的范围。这也解决了 "
我用那个字体太棒了 <link> 方格检查)。在第一次尝试时,我添加了 < < ,但是宏预览没有图标,因此看起来
Ctrl键 然后输入