提问 技术人员在线解答

Tinmyce编辑器prism.js与Clipboard.js实现代码高亮与复制功能

lostman | 2020-12-04 | 945人看过

一、Tinmyce编辑器版本  5.2++

Tinmyce初始化配置中加入codesample(代码示例插件) 插件 (这里因为方便观看,插件和菜单只填了codesample)

 tinymce.init({
            selector: '#testtextarea',
            plugins: [
                "codesample"
            ],
           // toolbar: "",
            toolbar:['codesample'
            ],
    });

效果如下

然后编辑好内容提交到数据库中之后开始处理前端页面

当然,我们自己的前端页面默认是没有自动渲染引擎的,所以看到的效果是没有高亮的,这个时候就要用到我们的prismjs了 ,到prismjs官方网站(https://prismjs.com/)下载所需语言的对应js以及css文件

然后引入到我们的前端页面中

<link href="/prism.css" rel="stylesheet" />
<script src="/prism.js" ></script>

然后浏览器清除缓存运行前端页面效果如下

 

至此一步我们代码高亮这一步成功,感觉不够完美的就是没有方便复制的按钮,接下来我们引入复制代码的clipboard.js 官网(http://www.clipboardjs.cn/)

<script src="style/clipboard.js" ></script>
 <script>
//先获取每个代码块,添加进去button按钮
 var pre = document.getElementsByTagName('pre');
    for (var i = 0; i < pre.length; i++) {
	//var isLanguage = pre[i].children[0].className.indexOf('language-');
	var isLanguage = pre[i].className.indexOf('language-',0);
	if ( isLanguage === 0 ) {
			var button           = document.createElement('button');
					button.className = 'copy-button';
					button.textContent = '复制';
					pre[i].appendChild(button);
		}
    }
    
  
    //开始复制
    var copyCode = new Clipboard('.copy-button', {
	target: function(trigger) {
		return trigger.previousElementSibling;
	}
    });
    copyCode.on('success', function(event) {
	event.clearSelection();
	event.trigger.textContent = '复制成功';
	window.setTimeout(function() {
		event.trigger.textContent = '复制';
	}, 2000);
    });
</script>

 

然后刷新前端页面效果如下 (button的样式要自己写一下哦~~~)

如果需要像图中的代码一样显示行号,那么就需要给代码块的祖先元素添加一个class属性 line-numbers    可以直接给body添加,然后就可以显示行号啦

<script>
   //如果你的网页用了jquery 就可以如下代码直接添加行号  
   $('body').addClass("line-numbers");
</script>
©本文信息来自于互联网收集整理或者本站整理发布,如有疑问请联系我们。

热门推荐

相关问答更多

相关科普更多

PHP接收微信公众号发送来的普通信息
lostman 技术鹅

以下为微信开发中的学习demo  在微信的服务器配置url对应的PHP文件中写入如下代码即可接收到微信服务器发送的普通消息,即用户发送消息给公众号的时候返回同样...

Tinmyce编辑器prism.js与Clipboard.js实现代码高亮与复制功能
lostman 技术鹅

一、Tinmyce编辑器版本  5.2++ Tinmyce初始化配置中加入codesample(代码示例插件) 插件 (这里因为方便观看,插件和...

PHP对接微信公众平台消息接口开发教程
lostman 技术鹅

一、写好接口程序 在你的服务器上上传好一个接口程序文件,如https://www.net1988.com/weixin.php  内容如下:...

win10怎么建立局域网工作组
lostman 技术鹅

在win10系统中,建立局域网能够实现实现资源的共享,既然资源要共享,资源就不会太少,而工作组就是将不同的电脑按功能分别列入不同的组中,以方便管理,如果你要访问某个系别的...

大神为你演示win10系统关闭ltsb自动更新的步骤
lostman 技术鹅

许多win10系统用户在工作中经常会遇到对win10系统关闭ltsb自动更新的设置方法,想必大家都遇到过需要对win10系统关闭ltsb自动更新进行设置的...

建站租用云服务器的几种好处
lostman 技术鹅

各种产业的发达与升级,现在的各个企业都不断的意识到了网络营销的重要性,一个网站或者店铺可以随时随地的带来不可想象的流...

展开更多