博客园自定义

半城伤御伤魂 提交于 2019-11-28 07:30:47

仅对 markdown 做了优化,未测试其他编辑器

复制功能

添加复制按钮的 css

.cnblogs-markdown pre {
    position: relative;
}
.cnblogs-markdown pre>span {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 2px;
    padding: 0 10px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    cursor: pointer
}
.cnblogs-markdown pre>.copyed {
    background: #67c23a
}

先引入复制功能所需要的库

<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>

再使用库

$(function() {
  if ($("#post-date")[0]) {
    var pres = $(".cnblogs-markdown pre");
    if (pres.length) {
      pres.each(function() {
        var t = $(this)
          .children("code")
          .text();
        var btn = $('<span class="copy">复制</span>').attr(
          "data-clipboard-text",
          t
        );
        $(this).prepend(btn);
        var c = new ClipboardJS(btn[0]);
        c.on("success", function() {
          btn.addClass("copyed").text("复制成功");
        });
        c.on("error", function() {
          btn.text("复制失败");
        });
        btn.mouseleave(function() {
          btn.text("复制").removeClass("copyed");
        });
      });
    }
  }
});
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!