工作室注册登录标签云赞助光荣榜

当前位置:首页 > 全栈分享 > 帝国cms > 正文

帝国cms解决代码高亮方法二

发布时间:2019-04-22 23:11:41作者:魏义齐阅读:()

本文为博主原创文章,未经博主允许不得转载。

文章“帝国cms编辑文章如何实现代码高亮”解决了文章“帝国cms编辑器更换为百度编辑器并成功实现前台代码高亮和自适应”的残留问题,但是有两个地方我不满意,一是半手动终究来讲还是麻烦,二是SyntaxHighlighter的高亮效果很单一,好像只有黄、蓝、灰三种颜色,所以继续研究怎么集成插件来解决代码高亮问题。

帝国cms本身的编辑器是CKeditor,CKeditor官方也有代码高亮插件codesnippet,但是帝国cms并没有把这个插件集成到编辑器里,这里深山博客博主的一篇文章帮到了我(http://www.vipshan.com/diguocms/35.html),经过我向他咨询成功集成codesnippet实现代码高亮,在这里我只是用自己的文字把解决方法转译记录下来,希望大家能更容易理解。

第一步:去官方下载四个东西,地址如下:
 
https://ckeditor.com/cke4/addon/codesnippet
https://ckeditor.com/cke4/addon/widget
https://ckeditor.com/cke4/addon/lineutils
https://ckeditor.com/cke4/addon/widgetselection

下载下来后解压到当前文件夹,然后把四个文件夹复制到/e/admin/ecmseditor/infoeditor/plugins下。

第二步:修改帝国cms编辑器配置文件,路径:/e/admin/ecmseditor/infoeditor/config.js,Dreamweaver打开从68行开始到结尾用以下代码替换:
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'; 
};
就多了一个codesnippet,所以大家不用担心这段代码对帝国cms的安全性有什么影响。

第三步:模板调用

把/e/admin/ecmseditor/infoeditor/plugins/codesnippet/lib/highlight/styles/monokai_sublime.css和/e/admin/ecmseditor/infoeditor/plugins/codesnippet/lib/highlight/highlight.pack.js复制到/skin下你站点的css和js文件夹里,这么做一是为了不暴露你的后台路径,二是减轻浏览器解析文件的压力。

然后在文章详情页调用css和js:
<link type="text/css" rel="stylesheet" href="[!--news.url--]skin/weiyiqi/css/monokai_sublime.css"> 
<script src="[!--news.url--]skin/weiyiqi/js/highlight.pack.js"></script>  
<script>hljs.initHighlightingOnLoad();</script>
路径替换成自己的,monokai_sublime.css是官方推荐的代码高亮显示风格,经过我的测试这个风格显示的代码高亮效果最好,如果你想试试别的风格,可以试试其它css,风格样式都在/e/admin/ecmseditor/infoeditor/plugins/codesnippet/lib/highlight/styles下,你可以切换看效果。

第四步:解决代码超出问题

在主题css里.hljs{}里写入overflow: auto;即可,经过我的修改好像无法实现代码自动换行也就是自适应,不管是在主题css里还是在模板样式文件里修改都不行,加!important也不行,所以只能是超出加滚动条。

下图是monokai_sublime.css的html代码高亮效果:
monokai_sublime代码高亮效果
帝国cms选CKeditor是有原因的,百度编辑器虽然功能多,但是2016年后就不再更新了,近期又被腾讯爆出存在严重安全漏洞,下载了上面四个文件的朋友应该看到更新日期是2019年4月9日,再用站长工具查一下seo信息,可以确定CKeditor是靠谱的,就本文的方法来讲应该是帝国cms实现代码高亮最科学的方法了

2019年4月28日补充:

1.如果在后台编辑文章时想看到跟前台一样的代码高亮效果还需修改上面第二步里的config.js,比如你的高亮风格用的时default.css,那么就把最后
config.codeSnippet_theme = 'monokai_sublime'; 
改为:
config.codeSnippet_theme = 'default'; 
2.如果想让代码自适应不出现滚动条,则在.hljs{}里写上:
white-space: pre-wrap;
2019年5月4日补充:white-space: pre-wrap; 虽然可以让代码分行,但是遇到一个完整的单词时如果上一行挤不下这个单词那么就会分到第二行,这样在移动端特别是小屏手机上代码看着很乱,word-break: break-all;虽然可以切割单词进行分行,但是在此处却无效,百度word-break: break-all;无效找到了一种写法可以实现切割单词分行,它是
white-space: normal; 
word-break: break-all; 
但是我发现这样所有代码成了左对齐,我乱试white-space的最后一个属性pre-wrap可完美解决问题,代码如下:
white-space: pre-wrap; 
word-break: break-all;
这样既能切割单词分行,又不会影响代码格式,移动端看着也舒服。时间原因我没深究这个问题,大家可以深入了解一下white-space和word-break以及它们的组合使用。

关于如何给code snippet添加行号,请看下一篇文章“帝国cms编辑器集成codesnippet代码高亮插件后为其添加行号的方法”。

本文标签帝国cms代码高亮 ,您可以阅读与「帝国cms代码高亮 」相关的所有文章

魏义齐全栈技术交流:魏义齐全栈技术交流

上一篇:公布一个由畅言自适应版代码和帝国cms转义反斜杠共同组成的bug下一篇:帝国cms编辑文章如何实现代码高亮

原创不易,您的赞助就是博主更新的动力!

赞助本站可在赞助光荣榜留下外链信息,支付宝扫此二维码可领红包

工作室注册登录标签云赞助光荣榜

最新会员
  • weiyiqi