yunbuluo

基于帝国CMS7.5版本编辑器代码高亮设置

因为发的技术文章多半含有代码，如果没有代码插件，那代码就显的太难看了，恰好ckeditor官方提供了高亮插件，这里记录一下如何实现。

一、下载插件及依赖工具

Code Snippet

widget

lineutils

widgetselection

二、将下载的插件解压，并复制到帝国的ckeditor目录下，注意是后台的那个

默认后台目录：e\admin\ecmseditor\infoeditor\plugins

三、修改配置文件

配置文件路径：e\admin\ecmseditor\infoeditor\config.js

配置文件中共有两个工具条，一个是全功能的，一个是精简的

在两个工具条中添加代码工具CodeSnippet

然后在工具条下方添加代码工具的配置

这里我把我的发上来供大家参考

CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: // config.language = 'fr'; // config.uiColor = '#AADC6E'; config.filebrowserImageUploadUrl = ''; config.filebrowserFlashUploadUrl = arraycs[0]; config.filebrowserImageBrowseUrl = arraycs[1]; config.filebrowserFlashBrowseUrl = arraycs[1]; config.enterMode = CKEDITOR.ENTER_BR; config.shiftEnterMode = CKEDITOR.ENTER_P; config.allowedContent= true; config.font_names='宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;'+ config.font_names; // Toolbar config.toolbar_full = [ { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source', '-', 'Preview', 'Print' ] }, { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] }, { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ] }, '/', { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat', 'ecleanalltext', 'autoformat' ] }, { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] }, { name: 'insert', items: [ 'Image', 'etranmore', 'Flash', 'etranmedia', 'etranfile', '-', 'Table', 'HorizontalRule', 'SpecialChar','CodeSnippet', 'equotetext', 'einserttime', 'einsertpage', 'einsertbr' ] }, '/', { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] }, { name: 'colors', items: [ 'TextColor', 'BGColor' ] }, { name: 'tools', items: [ 'ShowBlocks', 'NewPage', 'Templates' ] }, { name: 'others', items: [ '-' ] }, { name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Find', 'Replace', '-', 'SelectAll', 'Maximize' ] }]; // Toolbar config.toolbar_basic = [ { name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source' ] }, { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] }, { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] }, { name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar','CodeSnippet' ] }, { name: 'tools', items: [ 'Maximize' ] }, { name: 'others', items: [ '-' ] }, '/', { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Strike', '-', 'RemoveFormat' ] }, { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] }, { name: 'styles', items: [ 'Styles', 'Format' ] },]; config.extraPlugins = 'etranfile,etranmedia,etranmore,autoformat,ecleanalltext,einsertbr,einsertpage,einserttime,equotetext'; config.extraPlugins ='codesnippet'; config.codeSnippet_theme = 'monokai_sublime'; config.toolbar = 'full';};

做完以上步骤，代码在后台是高亮的，但是在前台还不是高亮显示。现在需要我们做最后一步。

将gaoliang.css以及highlight.pack.js文件上传到网站服务器中，并在内容模板body前添加以下代码。

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

其中skin/jxhx/css和skin/jxhx/js是我放置文件的路径，可以随意更改，路径正确就可以。

上述所有的插件可以通过链接跳转下载，css和js文件可以从我网站张扒下来，所有的文件我都进行了打包。

帝国CMS7.5版本编辑器代码高亮设置所有插件以及文件下载，提取码：pspl。

抄代码的搬运工｜jquery实现帝国cms当前导航高亮的实践演练

想要实现帝国cms的当前导航高亮功能（注：导航的html结构不是用灵动标签调用的栏目名称动态提取的，而是写死的），结果大费周章，抄了五六段jquery代码后都没有搞定，哥几乎要哭了。

好在最后终于实现了帝国cms当前导航的高亮效果。如下：

如果没有成功，并不是网上的jquery代码有问题，而是没有套对套准。要想成功，需要html结构、css样式和jquey代码三者都耦合到位才成。

放在页面头部模板的导航html结构：

<div class="nav" ><div class="clearfix content_gy"><div class="left"> <img src="/skin/custom/images/logo_pic.png" alt=""/> </div><div class="right"><p class="clearfix top"> <span class="span1">全国免费咨询电话：</span> <span class="span2">137-1842-6927</span> </p><ul class="right_ul clearfix"> <li ><a href="/index.html" rel="/index.html"><span class="span1">首页</span><span class="span2">Home</span></a></li><li><a href="/case/" rel="/case/"><span class="span1">品牌案例</span><span class="span2">Case</span></a></li><li><a href="/about.html" rel="/about.html"><span class="span1">匠心筑龙</span><span class="span2">Zhu long</span></a></li><li><a href="/flow.html" rel="/flow.html"><span class="span1">服务流程</span><span class="span2">Flow</span></a></li><li><a href="/news/" rel="/news/"><span class="span1">新闻动态</span><span class="span2">News</span></a></li><li><a href="/contact.html" rel="/contact.html"><span class="span1">联系我们</span><span class="span2">Contact US</span></a></li></ul></div></div></div>

对应的css:

.nav .right ul li a.active span{color: #d26400;}

底部模板的jquery代码：

<script type="text/javascript">var urlstr = location.href;var urlstatus=false;$(".nav a").each(function () {if ((urlstr + '/').indexOf($(this).attr('rel')) > -1&&$(this).attr('rel')!='') {$(this).addClass('active'); urlstatus = true;} else {$(this).removeClass('active');}});if (!urlstatus) {$(".nav a").eq(0).addClass('active'); }</script>

代码的大体意思是通过当前url网址来进行判断，为当前点击的菜单增加.active样式，其他的则移除掉。其他情况则为首页加上.active样式。

太多的原理说不清楚，经过实践并成功的jquery实现帝国cms当前导航高亮，发现要注意以下几点。

1.a标签的链接代码，最开始抄的代码最为简单明了，可是最终比对发现a的链接是假链接，即:href=_javascript:;而自己实现的导航a是链接到不同页面的；

2.class=”active”的位置，开始是放在上一层，即：<li class=”active”>,没有测试成功(网上很多jquery实现高亮的代码是作用在li标签上，可惜没有抄成功)。后来参考别的代码，重新把active放在a标签上。

3.active放在a标签上后，对应的css也要调整，以免css失效。

4.jquery代码照抄就好，不会错，标红的“nav a”（两处）则匹配导航html结构，不容有误，另外根据代码，为导航的a标签添加了rel属性。

测试过程中可以通过浏览器的开发者工具观察查看，发现一些问题所在。

以上jquery代码实现帝国cms当前导航的高亮效果，实质上这是一种可以通用的效果，并不限制于cms本身。成功了，就记下来备用，省得下次又费时费力去实践，毕竟，哥只是个代码搬运工，不是程序员啊。