RIPRO美化-pre标签文本新增复制代码功能

RIPRO美化-pre标签文本新增复制代码功能

写文章的时候,作为一名专业的码农,经常会在文章中粘贴一些代码。对于少许的代码块复制还行,但是对于代码块比较长的,如果需要复制这段代码就比较麻烦。像其他比较专业的博客系统,都会在代码块上有一个复制代码的按钮功能,用来快速复制整个代码块的代码,省时省力。于是我也想给我的博客增加一个这个功能,话不多说,安排起来。

实现思路

  1. 在页面加载完成之后,使用js给每个pre标签增加一个按钮“复制代码”;
  2. 给按钮增加点击事件,点击事件的功能就是复制代码块的内容。

实现代码

CSS部分

btn-pre-copy是pre标签中使用js增加的“复制代码”按钮。css的作用是让他显示在pre标签的右上角。这里要注意pre标签和按钮中position属性。

.code-toolbar {
    position: relative;
}

pre .btn-pre-copy {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    color: hsla(0,0%,54.9%,.8);
    transition: color .1s;
}

js部分

js部分主要是给pre标签增加按钮和实现拷贝部分,我这里拷贝部分的实现是先实例化一个临时的节点textarea,然后把pre的内容设置进这个临时节点,然后选中内容进行复制,最后销毁这个节点。具体参考代码。

注意:js部分有依赖于jquery。

暂无优惠

已有15人支付

「点点赞赏,手留余香」

2

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » RIPRO美化-pre标签文本新增复制代码功能

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们