复制文本到剪切板,用到了开源项目clipboard.js

下载

官网:https://clipboardjs.com

可以通过npm安装:

npm install clipboard --save

也可以通过script引入

引入

clipboard.js-master中的dist文件夹解压到主题的/assets/js文件夹中即可(推荐把dist改为clipboard.js,方便辨认)

1.在主题目录下headre.php中插入下面的代码

<script src="/usr/themes/handsome/assets/js/clipboard.js/clipboard.min.js"></script>
  • handsome的header.php处于主题目录component
  • 插入到</head>之前即可

2.在主题设置-开发者设置-自定义JavaScript中插入代码

var btn = document.getElementById('btn');
var clipboard = new ClipboardJS(btn);
clipboard.on('success', function(e) {
    console.log(e);
});
clipboard.on('error', function(e) {
    console.log(e);
});

如何使用

文章中直接插入以下代码即可,将标签id设置为btndata-clipboard-text的值填写你要复制的字符串

[button]<span id="btn" data-clipboard-text="https://www.skaberen.com">复制链接</span>[/button]

效果(手机端可能无效):

如果你无法使用span标签,请看这里:

最后修改:2019 年 01 月 11 日 06 : 01 PM