帝国cms后台ck编辑器代码高亮显示带编号以及内容页代码高亮显示详细教程

　　帝国cms本身的编辑器是CKeditor，CKeditor官方也有代码高亮插件codesnippet，但是帝国cms并没有把这个插件集成到编辑器里,通过百度查询了很多资料，但是没几个真正能够用的感谢博主魏义齐个人博客，此博主整理了很多篇内容文章，为了方便大家就为大家提供详细步骤

　　注：网络上只有他的教程比较全面，本站使用的方法和他基本一致，唯一想吐槽的就是他整了好几篇内容要点过来点过去的麻烦。

　　具体步骤如下：

　　1、去官方下载四个东西，地址如下：

　　https://ckeditor.com/cke4/addon/codesnippet

　　https://ckeditor.com/cke4/addon/widget

　　https://ckeditor.com/cke4/addon/lineutils

　　https://ckeditor.com/cke4/addon/widgetselection

　　如果不想下载本站(www.xinglianwangluo.con)提供下载包

　　下载下来后解压到当前文件夹，然后把四个文件夹复制到/e/admin/ecmseditor/infoeditor/plugins下即可

　　2、修改相关文件config.js

　　本站没有采用此博主的内容是按照自己的想法来进行修改了config.js文件修改内容如下

　　查找config.extraPlugins，在后面增加codesnippet;

　　增加默认样式：

config.codeSnippet_theme = 'monokai_sublime';

　　放到尾部即可，

　　3、在前端内容模板中添加相关css和js的引用

　　增加一个js名称自己命名，内容如下：

$(function () {
	$("code").each(function () {
		$(this).html("<ul id=\'codeblock'><li>" + $(this).html().replace(/\n/g, "\n</li><li>") + "\n</li></ul>");
	});
});

　　注意事项：1.一定要以引入的方式，不能直接写在模板里，因为帝国cms会转义反斜杠，写在模板里会导致代码分行错乱;2.一定要引入在网站的jquery库下面，否则不起作用。

　　最后引用css和js 文件中名字monokai_sublime.css和highlight.pack.js实例如下：

<link type="text/css" rel="stylesheet" href="[!--news.url--]wuqing/css/monokai_sublime.css"> 
<script src="[!--news.url--]wuqing/js/highlight.pack.js"></script>  
<script>hljs.initHighlightingOnLoad();</script>

　　最后看本站具体效果
   

　　查看演示：前端高亮形式
　　后台编辑器效果：

　　最后友情提示：

　　安装完后请强制刷新浏览器再到编辑器界面看是否有插入代码段按钮

　　注：若发现怎么改config.js里面的配置，编辑器还是不显示代码按钮，试着覆盖我提供的eshoweditor.php文件到/e/admin/ecmseditor/目录下

　　本插件适用于帝国cms7.5，其他版本请自行测试
 

本网刊登的文章均仅代表作者个人观点，并不代表本网立场。文中的论述和观点，敬请读者注意判断。

本文地址：http://www.xlkjgs.com/notes/ecms/14190.html