帝国cms7.5系统编辑器添加（Code Snippet）插件实现高亮代码显示

帝国cms7.5系统编辑器添加(Code Snippet)插件实现高亮代码显示

帝国cms7.5内容文本编辑器为ckeditor，本身官网有提供很多的扩展功能和插件，但帝国并没有相关插件，高亮代码就是通过Code Snippet 插件来实现高亮代码的功能。我们在编辑器直接插入代码即可。

先上效果图：

安装前：

安装后：

插件展示：

前台展示：

添加流程

1. 下载codesnippet扩展插件

2. 上传codesnippet相关文件到e/admin/ecmseditor/infoeditor/plugins/

3. 修改修改ckeditor配置config.js

4. 在内容页模板添加高亮代码样式

如果想自己修改的可以参照以下步骤进行修改，不想自己折腾的可以直接下载陵小宇打包好的文件直接覆盖到文件e/admin文件下，然后在内容页模板添加高亮代码样式即可。

(注意：文件仅为本人修改后的文件打包，不保证兼容您的cms系统;如您修改了后台登陆地址“admin”覆盖到你的登录地址文件下)

相关文件下载地址，我都放到了文章的末尾。

下面是修改的步骤

步骤一：下载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';

大概120行

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样式文件名

为方便，可直接将下面代码覆盖你的config.js代码


function EcmsEditorDoCKhtml(htmlstr){
	if(htmlstr.indexOf('"')!=-1)
	{
		return '';
	}
	if(htmlstr.indexOf("'")!=-1)
	{
		return '';
	}
	if(htmlstr.indexOf("/")!=-1)
	{
		return '';
	}
	if(htmlstr.indexOf("\\")!=-1)
	{
		return '';
	}
	if(htmlstr.indexOf("[")!=-1)
	{
		return '';
	}
	if(htmlstr.indexOf("]")!=-1)
	{
		return '';
	}
	if(htmlstr.indexOf(":")!=-1)
	{
		return '';
	}
	if(htmlstr.indexOf("%")!=-1)
	{
		return '';
	}
	if(htmlstr.indexOf("<")!=-1)
	{
		return '';
	}
	if(htmlstr.indexOf(">")!=-1)
	{
		return '';
	}
	return htmlstr;
}

function EcmsEditorGetCs(){
	var js=document.getElementsByTagName("script");
	for(var i=0;i<js.length;i++)
	{
		if(js[i].src.indexOf("ckeditor.js")>=0)
		{
			var arraytemp=new Array();
			arraytemp=js[i].src.split('?');
			return arraytemp;
		}
	}
}

var arraycs=new Array();
arraycs=EcmsEditorGetCs();

arraycs[0]=arraycs[0].replace('infoeditor/ckeditor.js','');

arraycs[1]=document.getElementById('doecmseditor_eaddcs').value;
arraycs[1]=EcmsEditorDoCKhtml(arraycs[1]);


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', 'equotetext', 'einserttime', 'einsertpage', 'einsertbr','CodeSnippet' ] },
	'/',
	{ 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' ] },
	{ 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,codesnippet';
	
	
	config.toolbar = 'full';
	config.codeSnippet_theme = 'monokai_sublime'; 
		
};

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

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

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

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

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

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

其他问题的修改

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

修改办法：

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

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

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

或改为

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

我的修改：

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

关于显示行号的问题可以查看文章