帝国CMS7.5系统编辑器实现高亮代码显示

步骤一：下载codesnippet文件和相关依赖工具

Code Snippet下载地址: https://ckeditor.com/cke4/addon/codesnippet

Widget下载地址: https://ckeditor.com/cke4/addon/widget

Line下载地址: Utilities https://ckeditor.com/cke4/addon/lineutils

将3个文件解压后上传到e/admin/ecmseditor/infoeditor/plugins/

步骤二：修改ckeditor配置config.js

修改帝国cms7.5编辑器配置文件e/admin/ecmseditor/infoeditor/config.js

1、增加扩展配置，extraPlugins = 'codesnippet';

config.extraPlugins = 'etranfile,etranmedia,etranmore,autoformat,ecleanalltext,einsertbr,einsertpage,einserttime,equotetext';

修改为

config.extraPlugins = 'etranfile,etranmedia,etranmore,autoformat,ecleanalltext,einsertbr,einsertpage,einserttime,equotetext,codesnippet';

2、工具栏添加 CodeSnippet 功能

大概在95行'einsertbr'后添加,'CodeSnippet'注意大小写，c和s要大写

{ name: 'insert', items: [ 'Image', 'etranmore', 'Flash', 'etranmedia', 'etranfile', '-', 'Table', 'HorizontalRule', 'SpecialChar', 'equotetext', 'einserttime', 'einsertpage', 'einsertbr','CodeSnippet' ] },

3、设置代码高亮样式在文件末尾添加以下代码

config.codeSnippet_theme= 'monokai_sublime'; //monokai_sublime为高亮css样式文件名

致此ckeditor添加代码高亮功能已经完成了，预览添加效果请清除浏览器缓存。

步骤三：内容页模板添加高亮代码样式

所有的样式都在目录里：e\admin\ecmseditor\infoeditor\plugins\codesnippet\lib\highlight\styles

选择一个自己喜欢的样式，添加到内容模板中，为了不暴露我们的后台登录地址可以把highlight文件复制到根目录的skin文件下

在内容页模板添加以下三行代码，即可高亮显示代码

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

其他问题的修改

1. 代码不能自适应页面大小，或超出部分不显示

修改办法：

在自己引用的css文件中添加以下样式，我引用的是default.css

在css文件中的.hljs{}内添加：

white-space: pre-wrap;
word-break: break-all;//超出部分自动换行

或改为

overflow-y: auto;//当代码超出显示区域将自带滚动条

致此，高亮代码功能修改全部完成。