Javascript 在bootstrap 3中复制到剪贴板

我想在我的网站上添加“复制到剪贴板”按钮。该站点使用Bootstrap3框架。我希望我的按钮与此处使用的“复制到剪贴板”按钮类似：

我试图合并以下代码：，但没有成功

Javascript:

$("a.copy").on('click', function (e) {
  e.preventDefault();
}).each(function () {
  $(this).zclip({
    path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
    copy: function() {
      return $(this).data('copy');
    }
  });
});

CSS:

HTML

这些复制到剪贴板链接正在工作。。。




如果我把这些链接放在引导下拉列表中，它们就会停止工作。。。

关于我应该如何将其添加到Bootstrap3站点上的按钮，有什么想法吗？或者还有其他好的选择吗

---

谢谢！：）

您的代码看起来不错，而且您的JSFIDLE代码工作正常。我在MacOSX上的Safari、Chrome和Firefox中试用过，它们都很有效。由于您的代码需要Flash，请确保已安装并启用Flash。

以下是我如何解决此问题，同时一直工作到凌晨4:00，并发布我的问题（请参阅），希望这将有助于一些人不要熬夜：）我尝试了Bootstrap当前网站复制其代码的方式，但Bootstrap目前正在使用旧的zeroClipboard插件。我曾尝试使用最新的zeroClipboard（截至目前），使其与Bootstrap相同

HTML:注意我没有在一行中添加所有代码，不要在第二行中添加

pre

&

code

，或者缩进代码使代码看起来很好，否则多余的代码将复制到剪贴板上

<div class="highlight"><pre><code>Some code/text goes here</code></pre></div>

CSS:

// Config ZeroClipboard
ZeroClipboard.config({
    hoverClass: 'btn-clipboard-hover'
})

// Insert copy to clipboard button before .highlight
$('.highlight').each(function () {
    var btnHtml = '<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>';
    $(this).before(btnHtml)
});

var zeroClipboard = new ZeroClipboard($('.btn-clipboard'));
var htmlBridge = $('#global-zeroclipboard-html-bridge');

// Handlers for ZeroClipboard
zeroClipboard.on('ready', function (event) {
    htmlBridge
        .data('placement', 'top')
        .attr('title', 'Copy to clipboard')
        .tooltip();

    // Copy to clipboard
    zeroClipboard.on('copy', function (event) {
        var highlight = $(event.target).parent().nextAll('.highlight').first();
        event.clipboardData.setData("text/plain", highlight.text())
    });

    // Notify copy success and reset tooltip title
    zeroClipboard.on('aftercopy', function () {
        htmlBridge
            .attr('title', 'Copied!')
            .tooltip('fixTitle')
            .tooltip('show')
            .attr('title', 'Copy to clipboard')
            .tooltip('fixTitle')
    });
});

// Notify copy failure
zeroClipboard.on('error', function () {
    ZeroClipboard.destroy();
    htmlBridge
        .attr('title', 'Flash required')
        .tooltip('fixTitle')
        .tooltip('show');
});

JavaScript:将

ZeroClipboard.swf

放在JS文件所在的位置

//配置零剪贴板
ZeroClipboard.config({
hoverClass:“btn剪贴板悬停”
})
//将“复制到剪贴板”按钮插入之前。高亮显示
$（'.highlight'）。每个（函数（）{
var btnHtml='复制'；
$（此）.before（btnHtml）
});
var zeroClipboard=新的zeroClipboard（$（'.btn clipboard'）；
var htmlBridge=$（“#全局html桥”）；
//零剪贴板的处理程序
zeroClipboard.on（'ready'，函数（事件）{
htmlBridge
.data（'位置'，'顶部'）
.attr（'标题'，'复制到剪贴板'）
.工具提示（）；
//复制到剪贴板
zeroClipboard.on（'copy'，函数（事件）{
var highlight=$（event.target.parent（）.nextAll（'.highlight'）.first（）；
event.clipboardData.setData（“text/plain”，highlight.text（））
});
//通知复制成功并重置工具提示标题
zeroClipboard.on（'aftercopy'，函数（）{
htmlBridge
.attr（'title'，'Copied！'）
.工具提示（'fixTitle'）
.tooltip（'显示'）
.attr（'标题'，'复制到剪贴板'）
.工具提示（'fixTitle'）
});
});
//通知复制失败
zeroClipboard.on（'error'，function（）{
ZeroClipboard.destroy（）；
htmlBridge
.attr（'title'，'Flash required'）
.工具提示（'fixTitle'）
.工具提示（“显示”）；
});

它没有什么神奇之处，您只需在页面上包含脚本，每个带有class

copy

的链接都将成为剪贴板复制链接。当然，您还必须包括

zclip

库，并且您可以更改选择器以选择任何其他元素

<div class="highlight"><pre><code>Some code/text goes here</code></pre></div>

/* ZeroClipboard styles */

.zero-clipboard {
    position: relative;
    display: none;
}
.btn-clipboard {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    display: block;
    padding: 5px 8px;
    font-size: 12px;
    color: #777;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #e1e1e8;
    border-radius: 0 4px 0 4px;
}
.btn-clipboard-hover {
    color: #fff;
    background-color: #563d7c;
    border-color: #563d7c;
}

@media (min-width: 768px) {
    .zero-clipboard {
        display: block;
    }
    .zero-clipboard .btn-clipboard {
        top: -16px;
        border-top-right-radius: 0;
    }
}

// Config ZeroClipboard
ZeroClipboard.config({
    hoverClass: 'btn-clipboard-hover'
})

// Insert copy to clipboard button before .highlight
$('.highlight').each(function () {
    var btnHtml = '<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>';
    $(this).before(btnHtml)
});

var zeroClipboard = new ZeroClipboard($('.btn-clipboard'));
var htmlBridge = $('#global-zeroclipboard-html-bridge');

// Handlers for ZeroClipboard
zeroClipboard.on('ready', function (event) {
    htmlBridge
        .data('placement', 'top')
        .attr('title', 'Copy to clipboard')
        .tooltip();

    // Copy to clipboard
    zeroClipboard.on('copy', function (event) {
        var highlight = $(event.target).parent().nextAll('.highlight').first();
        event.clipboardData.setData("text/plain", highlight.text())
    });

    // Notify copy success and reset tooltip title
    zeroClipboard.on('aftercopy', function () {
        htmlBridge
            .attr('title', 'Copied!')
            .tooltip('fixTitle')
            .tooltip('show')
            .attr('title', 'Copy to clipboard')
            .tooltip('fixTitle')
    });
});

// Notify copy failure
zeroClipboard.on('error', function () {
    ZeroClipboard.destroy();
    htmlBridge
        .attr('title', 'Flash required')
        .tooltip('fixTitle')
        .tooltip('show');
});