帝国cms7.5后台编辑器插入代码显示高亮与行号插件codesnippet

帝国cms7.5后台使用的富文本编辑器是ckeditor，但没有高亮功能。网上很多高亮的插件全部是放的官网链接，与帝国自带的编辑器无法兼容，因此加入后无法生效并导致编辑器变成灰色色块。

经过多方查找与测试，我们最终能够确认帝国cms7.5编辑器ckeditor的版本号是4.5.9。而我们的插件，也要是对应版本。

一、操作流程

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

二、具体步骤

在实际操作中常会发生因为细节导致出错的问题，请务必注意备份以便及时恢复避免突发情况无法处理导致业务受影响。

1、添加扩展插件codesnippet
codesnippet是ckeditor官方提供的扩展插件，总共需要添加三个js扩展库：codesnippet、lineutils、widget 。这三个包都是ckeditor4.5.9的扩展包。由于官网当前版本的插件无法兼容，在此提供下载链接。请通过当前页面下载插件并上传至以下目录：

/e/admin/ecmseditor/infoeditor/plugins/

2、修改ckeditor配置文件config.js ，路径如下：

/e/admin/ecmseditor/infoeditor/config.js

需要修改三处，分别位于本教程的95，120，125行，依次代表编辑器插入按钮、插件路径与样式，请注意95行的大写字母。

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'; 
};

可以全文复制，也可以搜索当前页面的codesnippet，在对应位置添加即可。操作前请注意备份。

执行完上述操作后，请务必清空浏览器缓存并测试是否生效。此时，点击插入代码段按钮将出现下拉框显示语言并粘贴代码，如下图。

如果没有对应按钮与界面，请检查操作步骤。如果编辑器变成灰色，请清空缓存再测试。

3、前端增加代码高亮css样式
样式位于文件夹位置如下，其中的样式非常丰富，可以自行选择其中一个复制到前台的样式文件夹（请不要直接引入，以免暴露后台路径）。

/e/admin/ecmseditor/infoeditor/plugins/codesnippet/lib/highlight/styles/xx.css

js路径如下

/e/admin/ecmseditor/infoeditor/plugins/codesnippet/lib/highlight/highlight.pack.js

而后在前台模板引入即可

<link rel="stylesheet" href="/style/css/dark.css">
<script src="/style/js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

 

三、成品美化

1、解决没有行号的缺陷
务必以script src="/style/js/xx.js"的形式引入包含下方代码的js文件，避免被帝国转义导致不生效。

$(function () {
    $("code").each(function () {
        $(this).html("<ul id=\'codeblock'><li>" + $(this).html().replace(/\n/g, "\n</li><li>") + "\n</li></ul>");
    });
});

2、解决插件无法换行的bug

.hljs { 
    display: block; 
    padding: 0.5em 0 0.5em 0.5em; 
    background: #444; 
    border: solid 1px #DEE1E6; 
    border-radius: 3px; 
    white-space: pre-wrap; 
    word-break: break-all; 
} 
.hljs ul { 
    margin-left: 40px; 
} 
.hljs ul li { 
    border-left: solid 1px #DEE1E6; 
    padding: 3px; 
    list-style: decimal-leading-zero;
} 
.hljs ul li:nth-child(even) { 
    background-color: #4a4a4a; 
} 

以上，就是帝国cms7.5后台编辑器插入代码显示高亮与行号插件的全部使用+完善步骤，赶紧试试吧。
 

四、其他

1、代码高亮样式可点击这里查看。加载速度略慢，打开后需要等一会，否则可能点击样式名没有反应。选择好之后可以到下载链接里配置对应的样式名。
2、如需配置帝国cmsckeditor高亮插件codesnippet默认语言为php/html请移步。