帝国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
将下载到的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;
//当代码超出显示区域将自带滚动条
我的修改效果
自此所以修改完成
本篇文章所展示的效果就是我修改后的效果。如喜欢这种风格可以按这个步骤来修改，这里每一个步骤都很详细了，千万要阅读每一个字，保证步骤不出错，才能修改成功。
在线下载列表
高这代码下载
评论(0)