技术湾

您现在的位置是:首页 > 学习笔记 > 帝国CMS

帝国CMS

帝国ECMS7.5默认编辑器添加代码高亮

2020-09-29 15:50:47 帝国CMS 人点赞
因为发的技术文章多半含有代码,如果没有代码插件,那代码就显的太难看了,恰好ckeditor官方提供了高亮插件,这里记录一下如何实现。一、下载插件及依赖工具 Code Snippet 下载

因为发的技术文章多半含有代码,如果没有代码插件,那代码就显的太难看了,恰好ckeditor官方提供了高亮插件,这里记录一下如何实现。

一、下载插件及依赖工具

二、将下载的插件解压,并复制到帝国的ckeditor目录下,注意是后台的那个

默认后台目录:e\admin\ecmseditor\infoeditor\plugins

三、修改配置文件

配置文件路径:e\admin\ecmseditor\infoeditor\config.js

配置文件中共有两个工具条 { name: 'insert', items: [ ,一个是全功能的,一个是精简的

在两个工具条中添加代码工具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';
};

我使用的版本(推荐)

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_P;
    config.shiftEnterMode = CKEDITOR.ENTER_BR;

    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,codesnippet';

    config.codeSnippet_theme = 'monokai_sublime';
    config.toolbar = 'full';
};

推荐理由:在原有编辑器上添加,无阉割,可完全结合系统默认编辑器。

懒人包下载:

帝国ECMS7.5默认编辑器添加代码高亮-懒人包.zip
a0d4fb0561cb1925c357a7553d3e2036.zip (495.85 KB)

直接解压放置目录下即可。

默认后台位置: \e\admin\ecmseditor\infoeditor\

默认前台投稿: \e\data\ecmseditor\infoeditor\

 

效果截图:

帝国ECMS7.5默认编辑器添加代码高亮

刷新浏览器,更新缓存,不行就多换两个浏览器试试看!

刷新浏览器,更新缓存,不行就多换两个浏览器试试看!

刷新浏览器,更新缓存,不行就多换两个浏览器试试看!

刷新浏览器,更新缓存,不行就多换两个浏览器试试看!

四、添加前端展示Js、Css

在要显示代码高亮的内容页放入Js、Css

//前段代码高亮插件目录`\CodeHighlighter\static\prism.js`
//前段代码高亮插件目录`\CodeHighlighter\static\styles\改为对应的风格名.css` (如跟您博客样式有冲突,稍作修改此 css 即可)
<script src="[!--news.url--]skin/CodeHighlighter/static/prism.js"></script>

<link rel="stylesheet" href="[!--news.url--]skin/CodeHighlighter/static/styles/okaikia.css">
//自定义修改 代码高亮 CodeHighlighter 插件 CSS、JS 路径

前端代码高亮用的是 Typecho 的 CodeHighlighter 插件
 

CodeHighlighter.zip
c92d410b4ce2e40682ea506fc0a19f3d.zip (68.73 KB)

选择高亮主题风格 (官方提供的 8 种风格切换)

  • coy.css
  • dark.css
  • default.css
  • funky.css
  • okaikia.css (默认选中,因为比较顺眼)
  • solarized-light.css
  • tomorrow-night.css
  • twilight.css

830*140广告

文章评论