RIPRO美化-pre标签文本新增复制代码功能
目录
写文章的时候,作为一名专业的码农,经常会在文章中粘贴一些代码。对于少许的代码块复制还行,但是对于代码块比较长的,如果需要复制这段代码就比较麻烦。像其他比较专业的博客系统,都会在代码块上有一个复制代码的按钮功能,用来快速复制整个代码块的代码,省时省力。于是我也想给我的博客增加一个这个功能,话不多说,安排起来。
实现思路
- 在页面加载完成之后,使用 js 给每个 pre 标签增加一个按钮“复制代码”;
- 给按钮增加点击事件,点击事件的功能就是复制代码块的内容。
实现代码
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。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » RIPRO美化-pre标签文本新增复制代码功能
码云笔记 » RIPRO美化-pre标签文本新增复制代码功能