帝国cms7.5添加代码高亮

  • 作者:Bdk
  • 来源:网络
  • 时间:2020-11-21 22:47:46
  • 0人已阅读
简介:帝国cms7.5后台使用的富文本编辑器是ckeditor,版本号是4.5.9。技术类的博客应该都需要代码高亮,方便阅读代码和区分非代码文本。

帝国cms7.5后台使用的富文本编辑器是ckeditor,版本号是4.5.9。技术类的博客应该都需要代码高亮,方便阅读代码和区分非代码文本。
  这篇文章介绍了添加的方法和遇到的问题,希望对大家能有帮助。最终效果如上图。

一、整体操作步骤

  1. 添加扩展插件codesnippet
  2. 修改ckeditor配置config.js
  3. 前端增加代码高亮css样式

二、操作流程

2.1 添加扩展插件codesnippet

codesnippet是ckeditor官方提供的扩展插件,内部使用highlight使代码高亮。highlight官网:https://highlightjs.org/
codesnippet的扩展包里面已经有hightlight的css样式和js文件了。 所有代码高亮样式在 codesnippet\lib\highlight\styles 文件夹中。
codesnippet 依赖 widget 和 lineutils 扩展库。所以总共需要添加三个js扩展库:codesnippet、lineutils、widget 。

下载链接

这三个包都是ckeditor 4.5.9的扩展包。
将上面三个包解压后放入ckeditor的扩展目录中,在帝国cms中路径为 e\admin\ecmseditor\infoeditor\plugins
至此,添加扩展插件就完成了。

2.2 修改ckeditor配置config.js

  ckeditor的配置文件为config.js,在帝国cms中的路径为:e\admin\ecmseditor\infoeditor\config.js
  需要修改三处:
  1. 增加扩展配置,extraPlugins = 'codesnippet';
  2. 工具栏添加 CodeSnippet 功能
  3. 设置代码高亮样式
替换原来的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= 'mono-blue';
	
};

至此,ckeditor添加代码高亮功能已经完成了。这一步需要注意的是codesnippet 在工具栏的名称为 CodeSnippet 注意大小写,不然会添加失败。
代码高亮的样式在codesnippet 文件下已经存在了,里面还有demo,可以选一个自己喜欢的样式。

2.3 前端增加代码高亮css样式

所有的样式都在目录里:e\admin\ecmseditor\infoeditor\plugins\codesnippet\lib\highlight\styles,选择一个喜欢的样式,拷贝至前端样式文件夹。
highlight.pack.js,也在codesnippet\lib\highlight下面,拷贝/skin/default/ecmseditor/文件夹。
前端页面增加下面三行代码,即可显示通过后台添加的代码高亮了。
<link rel="stylesheet" href="/skin/default/ecmseditor/default.css"><!--代码高亮样式-->
<script src="/skin/default/ecmseditor/highlight.pack.js"></script><!--highlight库-->
<script>hljs.initHighlightingOnLoad();</script><!--渲染代码高亮-->
 

附件下载

    [!--downpath--]

上一篇:返回列表

下一篇:返回列表

Top