SEO技术博客帝国教程 ↬ 正文帝国教程

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

深山2019-01-21 15:56帝国教程快速评论

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

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

Code Snippet效果预览

后台预览:

帝国cms代码高亮后台预览
帝国cms代码高亮后台预览

前台预览:

帝国cms代码高亮前台预览

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

1.下载Code Snippet及三个依赖工具,一共下载四个,我这里留官网的地址,不给大家打包了,因为官方的可能随时都会更新,

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

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'] 
        }, 
        '/', { 
            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', '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'; 
};

4.最后就是引用了。在内容页模板中引用

<link href="/e/admin/ecmseditor/infoeditor/plugins/codesnippet/lib/highlight/styles/monokai_sublime.css" rel="stylesheet">
<script src="/e/admin/ecmseditor/infoeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script> 
<script>hljs.initHighlightingOnLoad();</script>

PS:这里要说明一点monokai_sublime.css是这个插件的主题风格,具体可以到https://ckeditor.com/docs/ckeditor4/latest/examples/codesnippet.html预览,然后将你喜欢的风格引入到内容页模板即可。

PS:如果直接入上代码去引用的话,等于将你的后台目录赤裸裸的暴露在了外面,所以我建议将这两个文件复制一份放到其他目录,再进行引用,如下

<link href="http://www.vipshan.com/skin/jxhx/css/monokai_sublime.css" rel="stylesheet">
<script src="http://www.vipshan.com/skin/jxhx/js/highlight.pack.js"></script> 
<script>hljs.initHighlightingOnLoad();</script>

5.这时虽然前台文章中的代码是高亮显示了,但是并不能自适应页面大小,超出的部分很难看,解决代码自动换行可以在.hljs{}下面加入:

white-space: pre-wrap;
word-break: break-all; 

设置代码自适应

如果想要不自动换行而是显示滚动条,可以在css样式中的.hljs{}下面加入:

overflow-y: auto;

为高亮代码增加行号

以下方法参考自疆飞博客

1.将下面这段js加到你网站的共有js中(不能添加在highlight.js内,因为此方法并非使用highlight.js函数来完成的)

//vipshan.com
$(function () { 
    $("code").each(function () { 
        $(this).html("<ol><li>" + $(this).html().replace(/\n/g, "\n</li><li>") + "\n</li></ol>"); 
    }); 
}); 

PS:以上代码的原理是:将代码中的换行(/n)替换成 </li><li>, 然后在代码内容的前面添加 <ol><li>, 而最后添加</li></ol>,这样代码就被<li></li>每行隔开了,再后通过css添加行数即可。

2.在控制高亮的css后面加入下面css代码;更多效果需要自己调整了,这个没办法固定的。

/*vipshan.com*/
.hljs {
    background: #eee !important;
    padding: 1px;
    white-space: pre-wrap;
    word-break: break-all;
}
.hljs ul {
    list-style: decimal;
    background-color: #fff;
    margin: 0px 0px 0 40px !important;
    padding: 0px;
}
.hljs ul li {
    list-style: decimal-leading-zero;
    border-left: 2px solid #6ce26c !important;
    background: #fff;
    padding: 1px 5px 0 3px !important;
    margin: 0 !important;
    line-height: 15px;
    word-break: break-all;
    word-wrap: break-word;
    line-height: 1.3;
}
.hljs ul li:nth-of-type(even) {
    background-color: #fcfcfc;
    color: inherit;
}

到这里基本上差不多了吧,我也就研究到这里,其他的以后研究,或者等待大家研究完了,我再参考下,代码高亮效果可以参考本文代码高亮部分!

本次只是作为一个小白水平操作的一个记录,前台的显示还有很多需要美化的。

- END -

浏览完了?你可以点我去评论留下观点!

评论

本月热门

站点信息

  • 网站运行
  • 共有文章:78 篇
  • 标签管理标签云
  • 网站程序DedeCMS V5.7 SP2
  • 群二维码:加入SEO技术交流群