whatshot【网页插件】老虎林代码复制插件 全平台兼容

@Ta 2021-02-04发布,06-17 15:16修改 13499点击

闲来无事,花了几分钟写了一下复制插件

引用:

该插件引用的 斗图助手插件 按钮的部分css代码,感谢该插件的作者(@000,),插件地址:https://hu60.cn/q.php/bbs.topic.89902.html

功能:

自动识别帖子中的代码,并且实现一键复制代码功能。

使用方法:

和其他插件一样, 复制代码放进去就可以了。

兼容性:

理论兼容主流电脑、平板、手机设备。
实际上我只测试了 ios 和 win10
有问题就评论,有时间就解决。

2021/2/5 补充:
没尝试IE浏览器

更新日志

2021/2/5
@cnhong, 怼说干嘛不用同一个cdn —— 9楼发言
现在所有资源更新为同一CDN。 感谢:bootcdn(https://www.bootcdn.cn/) 提供服务
fixbug:修改ID分配BUG(由于写的时候没注意导致所有的id都是一样的,就永远只能复制第一个。)
更新数据存储API加载方式

插件代码:

数据存储API加载

导入网页插件:代码复制按钮(当前用户:0,总安装次数:0)
<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script>
<script src="https://hu60.cn/q.php/api.webplug-file.21196_public_wz_copy_code.js"></script>

原始代码加载

<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	let idx = 1;

	$('.hu60_code code').each(function(){
		// 获取要复制的代码文本
		// let code_text = $(this).text();

		// 分配ID给代码文本
		let generate_id = 'wz_copy_code_' + idx;
                idx++;
		$(this).attr('id', generate_id);

		// 设置代码框相对定位
		$(this).parent().css('position', 'relative');

		// 创建复制按钮
		let copt_bth = $('<button class="btn">复制</button>').attr('data-clipboard-target', '#' + generate_id).css({
			position: 'absolute',
			top: 0,
			right: 0,
			background: 'radial-gradient(#6cc3fe, #21a1d0)',
			color: 'white',
			padding: '3px 6px',
			'font-weigth': 'bold',
			'animation-timing-function': 'ease-in-out',
			'animation-name': 'breathe',
		    'animation-duration': '2700ms',
		    'animation-iteration-count': 'infinite',
		    'animation-direction': 'alternate',
		});

		// 将复制按钮添加在代码框的右上角
		$(this).parent().prepend(copt_bth);
	});

	let clipboard = new ClipboardJS('.btn');

	clipboard.on('success', function(e) {
		console.info('Action:', e.action);
	    console.info('Text:', e.text);
	    console.info('Trigger:', e.trigger);

	    layer.msg('复制成功!');
    	
    	e.clearSelection();
	});

	clipboard.on('error', function(e) {
	    console.error('Action:', e.action);
	    console.error('Trigger:', e.trigger);

	    layer.msg('复制失败!');
	});
})
</script>

白日梦还是要做的

回复列表(24)
添加新回复
回复需要登录