亲测|解决帝国cms7.5编辑器插入代码片段高亮显示功能

因为发的技术文章多半含有代码,如果没有代码插件,那代码就显的太难看了,帝国cms7.5自身携带的编辑器唯一不足的地方就是没有代码片段和高亮显示功能,网上我们看到的解决办法相信你也感觉到了,不能彻底解决实际问题,也并不完整。恰好ckeditor官方提供了高亮插件,我也是经过多方面研究病完善了这一功能,不管是前台还是后台都可以正常显示。这里记录一下如何实现。

一、下载插件及依赖工具
Code Snippet
widget
lineutils
widgetselection

二、将下载的插件解压,并复制到帝国cm7.5的e\admin\ecmseditor\infoeditor\plugins目录下。

三、修改配置文件
配置文件路径:e\admin\ecmseditor\infoeditor\config.js 配置文件中共有两个工具条,一个是全功能的,一个是精简的,在两个工具条中添加代码工具CodeSnippet,然后在工具条下方添加代码工具的配置
这里我把我的发上来供大家参考:
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','CodeSnippet', 'equotetext', 'einserttime', 'einsertpage', 'einsertbr' ] },
        '/',
        { 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','CodeSnippet' ] },
        { 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';
        config.extraPlugins ='codesnippet';
        config.codeSnippet_theme = 'monokai_sublime';
        config.toolbar = 'full';
};

四:要想前台显示效果正常,必须引用高亮显示样式和运行代码,具体如下:
一下代码必须添加到内容页模板的</head>之前
<link rel="stylesheet" href="[!--news.url--]e/admin/ecmseditor/infoeditor/plugins/codesnippet/lib/highlight/styles/monokai_sublime.css">
<script src="[!--news.url--]e/admin/ecmseditor/infoeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
完成以上配置后,就能正常使用代码片段高亮显示功能了,前后台均显示正常,希望大家能够用上。有不足支出或不懂得,可以给我留言。

支付宝转账赞助

支付宝扫一扫赞助

微信转账赞助

微信扫一扫赞助

留言与评论(共有 0 条评论)
   
验证码: