帝国cms7.5版本内置的文本编辑器是ckeditor,这款编辑器非常的强大,本身官网提供了几百个可扩展的插件, 但帝国cms7.5内置的ckeditor是没有这些插件的,自然也没有代码高亮功能,如果我们需要添加代码高亮功能,就必须安装插件了。

  安装前:

 


  安装后:

 


 

  以下是添加流程

  一、整体操作步骤

  1、添加扩展插件codesnippet

  2、修改ckeditor配置config.js

  3、前端增加代码高亮css样式

  步骤一:下载Code Snippet及三个依赖工具

  官方下载地址

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

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

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

代码高亮插件.zip

本地下载:

8789cbb094e50034f3e26c997d5eb66c.zip (218.35 KB)

 

  将下载到的3个文件解压出来,3个文件夹上传到e/admin/ecmseditor/infoeditor/plugins/

      

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

  修改帝国cms7.5编辑器配置文件e/admin/ecmseditor/infoeditor/config.js ,也就是在工具栏中加入Code Snippet(如图二)的按钮

  需要修改三处:

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

  2、 工具栏添加 CodeSnippet 功能

  3、 设置代码高亮样式

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

  代码如下:
     温馨提示——有些人的config.js文件改动后好像没有任何反应,我建议直接复制我下面的代码然后覆盖你的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添加代码高亮功能已经完成了

  步骤三:前端增加代码高亮css样式

  要到内容页模板中添加引用,添加到html的<head></head>头部即可,以下是代码

    <link href="[!--new.url--]e/admin/ecmseditor/infoeditor/plugins/codesnippet/lib/highlight/styles/monokai_sublime.css" rel="stylesheet">
    <script src="[!--new.url--]e/admin/ecmseditor/infoeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script> 
    <script>hljs.initHighlightingOnLoad();</script>

 代码说明:这个插件提供了多个前端css展示样式,所有的样式都在:e/admin/ecmseditor/infoeditor/plugins/codesnippet/lib/highlight/styles目录里
       以下是样式

  这里我选用的是monokai_sublime.css

  具体可以到https://ckeditor.com/docs/ckeditor4/latest/examples/codesnippet.html#!/guide/dev_codesnippet在线预览,然后将你喜欢的风格引入到内容页模板head头部即可。
       浏览:

  如果直接像上面去引用代码的话,等于将你的后台目录赤裸裸的暴露在了外面,所以我建议将这两个文件highlight.pack.js和monokai_sublime.css(随自己选择)复制一份放到其他目录,再进行引用。

  我自己上放在了我的前端文件夹里,里面是我网站的所有前端相关代码,

  如下:

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

    这时虽然前台文章中的代码是高亮显示了,但是并不能自适应页面大小,超出的部分将不显示,以下解决代码自动换行

  往自己引用的css中添加以下代码,我引用的monokai_sublime.css,所以我这一步便是打开monokai_sublime.css

  打开后,便可以看到.hljs{}代码块,自动换行代码的添加位置便

  位于.hljs{}内

  添加内容:

white-space: pre-wrap;

word-break: break-all;

//自动换行

  或改为

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

    我的修改效果

       自此所以修改完成

  本篇文章所展示的效果就是我修改后的效果。如喜欢这种风格可以按这个步骤来修改,这里每一个步骤都很详细了,千万要阅读每一个字,保证步骤不出错,才能修改成功。

 

在线下载列表

高这代码下载

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。