手工SEO

手工SEO首页 帝国教程 正文

帝国cms7.5编辑器增加代码插件(Code Snippet)并高亮显示

手工SEO 2019-08-06 20:00:29 帝国教程 63℃ 手工SEO

帝国cms7.5版本编辑器是ckeditor,但是呢编辑器里面没有插入代码高亮这个功能(ckeditor编辑器是有个插件可以实现代码高亮的),也不知道官方是怎么想的 。可能这个插入代码高亮显示功能应该官方以后会更新的。

之前深山博客用的方法是《帝国CMS文章页添加代码如何高亮显示》这个方法,也算是比较完美了,但是我还是觉得很麻烦,不过在帝国论坛有过一篇帖子:将Code Snippet(代码片段)加入到帝国cms7.5现在的编辑器里面,实现代码高亮。

Code Snippet效果预览

后台预览:

帝国cms代码高亮后台预览


帝国cms代码高亮后台预览

前台预览:

帝国cms代码高亮前台预览

帝国cms7.5编辑器代码高亮插件

1.下载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

Widget Selection https://ckeditor.com/cke4/addon/widgetselection

具体介绍可自行到官网去查阅!

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

Code Snippet插件上传

3.修改帝国cms7.5编辑器配置文件/e/admin/ecmseditor/infoeditor/config.js ,也就是在工具栏中加入Code Snippet(参考代码如下)的按钮。大约从68行开始。

帝国cms增加插入代码按钮

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'] }, 'http://www.vipshan.com/', { 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'] }, 'http://www.vipshan.com/', { 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: ['-'] }, 'http://www.vipshan.com/', { 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.codeSnippet_theme = 'monokai_sublime'; config.toolbar = 'full'; };

上一篇:帝国cms通过栏目ID调取栏目名称,链接及文章列表

下一篇:没有了

网站分类
标签列表