给Code Snippet加入一键复制功能

1.加标签

2.一键复制

3.方法二:复制不需要全选(推荐)

1.加标签

悬浮子标签左上角

给子标签添加style="position:absolute;top:10px;right:10px;" 给父标签添加style="position: relative;"

\blog\templates\detail.html
<script type="text/javascript">
    var j = 0;
    {# 给每个pre加id #}
    $('pre').each(function (i, e) {
        $(this).attr('id', 'id1_' + i);
        {#给pre加个父标签#}
        $(this).wrap('<div id="new'+j+'" style="position: relative;"></div>');
        {#给pre加个同级标签#}
        $(this).after('<div class="toolbar" style="position:absolute;top:10px;right:10px;"><div class="toolbar-item"><button id="btn'+j+'" onClick="copyFn(' + j + ')" style="display:none">复制</button></div></div>');
        j++;
    });
    {#默认按钮隐藏,实现鼠标放上面显示复制,离开隐藏#}
    $(function () {
        for (var k = 0; k < 99; k++) {
                {#用到闭包#}
            (function () {
                var index = k;
                $('#new' + index).hover(function () {
                    $(this).find('button').show();
                    $("#btn"+ index).html("复制");
                }, function () {
                    $(this).find('button').hide();
                });
            }) (k)
        }
    })
</script>

2.一键复制

可以复制99个代码框,多了后期可以加

<script>

    function copyFn(pos) {
        for (var i = 0; i < 99; i++) {
            if (pos == i) {
                var val = document.getElementById('id1_' + i);
                window.getSelection().selectAllChildren(val);
                document.execCommand("Copy");

                $("#btn" + i).html("复制成功");
                {#alert("已复制好，可贴粘。");#}
                return;
            }

        }
    }

</script>

 3.方法二:复制不需要全选(推荐)

\blog\templates\detail.html

<script type="text/javascript">
    var j = 0;
    {# 给每个pre加id #}
    $('pre').each(function (i, e) {
        $(this).attr('id', 'id1_' + i);
        {#给pre加个父标签#}
        $(this).wrap('<div class = "parent" id="parent'+j+'" ></div>');
        {#给pre加个同级标签onClick="copyFn(\'id1_' + j + '\')" 里面要和preid一样#}
        $(this).after('<div class = "children"><button class="btn-code" id="btn'+j+'" onClick="copyFn(\'id1_' + j + '\')" >复制</button></div>');
        j++;
    });
    {#默认按钮隐藏,实现鼠标放上面显示复制,离开隐藏#}

    $(function () {
        {#首先获取所有的pre，可以判断多少个id1_#}
        var pre_ls = document.getElementsByTagName('pre');
        for (var k = 0; k < pre_ls.length; k++) {
                {#用到闭包#}
            (function () {
                var index = k;

                $('#parent' + index).hover(function () {
                    $(this).find('button').show();
                    $("#btn"+ index).html("复制");
                    {#查找语言#}
                    var c = document.getElementById("id1_" + index).className;
                        l = c.split(' ')[1];
                        $("#btn"+ index).append(l.split('-')[1]);

                }, function () {
                    $(this).find('button').hide();
                });
            }) (k)
        }
    })
</script>

\blog\static\selfcss.css 

div.parent {
    position: relative;
}

div .children {
    position: absolute;
    top: 10px;
    right: 10px;
}



.btn-code {

    display: none;
    background: none;
    color: white;
}

\blog\templates\detail.html

<script>

    function copyFn(element) {

        var text = document.getElementById(element);
        var selection = window.getSelection();   //返回一个  Selection 对象，表示用户选择的文本范围或光标的当前位置
        var range = document.createRange();  //创建一个范围对象
        range.selectNodeContents(text);  //text中的子节点放入range对象里
        selection.removeAllRanges();   //清除其他所有的被选中的节点
        selection.addRange(range);   //将范围中的数据选中
        document.execCommand("Copy");  //调用复制功能
        selection.removeAllRanges();  	 //清除所有选中的节点
        var final_id = element.split('_')[1]; //element格式为id_数字组成,用'_分割'获取第二位,因为_后面是数字
        $("#btn" + final_id).html("复制成功");

    }

</script>