北京快乐8

搜索

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

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

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

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

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

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

第一步:去官方下载四个东西,地址如下:

https://北京快乐8ckeditor.com/cke4/addon/codesnippet
https://ckeditor.com/北京快乐8cke4/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行开始到结尾用以下代码替换:
  1. CKEDITOR.editorConfig = function (config) { 
  2.     // Define changes to default configuration here. For example: 
  3.     // config.language = 'fr'; 
  4.     // config.uiColor = '#AADC6E'; 
  5.  北京快乐8;
  6.     config.filebrowserImageUploadUrl = ''
  7.     config.filebrowserFlashUploadUrl = arraycs[0]; 
  8.     config.filebrowserImageBrowseUrl = arraycs[1]; 
  9.     config.filebrowserFlashBrowseUrl = arraycs[1]; 
  10.  
  11.     config.enterMode = CKEDITOR.ENTER_BR; 
  12.     config.shiftEnterMode = CKEDITOR.ENTER_P; 
  13.  北京快乐8;
  14.     config.allowedContent = true;&北京快乐8nbsp;
  15.  
  16.     config.font_names = '宋体/宋体;黑体/黑体;仿宋/北京快乐8仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;'&n北京快乐8bsp;+ config.font_names; 
  17.  
  18.     // Toolbar 
  19.     config.toolbar_full = [{ 
  20.             name: 'document'
  21.             groups: ['mode',&北京快乐8nbsp;'document',&北京快乐8nbsp;'doctools'], 
  22.             items: ['Source''-''Preview''Print'
  23.         }, { 
  24.             name: 'clipboard'
  25.             groups: ['clipboard'北京快乐8'undo'], 
  26.             items: ['Cut''Copy''Paste''PasteText',&北京快乐8nbsp;'PasteFromWor北京快乐8d''-',&北京快乐8nbsp;北京快乐8'Undo'北京快乐8'Redo'
  27.         }, 
  28.  
  29.         { 
  30.             name: 'paragraph',&北京快乐8nbsp;
  31.             groups: ['list'&北京快乐8#39;indent''blocks''ali北京快乐8gn'北京快乐8'bidi'], 
  32.             items: ['NumberedList''BulletedList''-''Outdent''Indent''-''Blockquote''CreateDiv''-''JustifyLeft''JustifyCenter''JustifyRight''JustifyBlock''北京快乐8-''BidiLtr''BidiRtl'
  33.         }, 
  34.         '北京快乐8/', { 
  35.             name: 'basicstyles'
  36.             groups: ['basicstyles''cleanup'], 
  37.             items: [北京快乐8'Bold''Italic''Underline''Strike''Subscript',&北京快乐8nbsp;'Superscript''-''RemoveFormat''ecleanalltext''autoformat'
  38.         }, 
  39.  
  40.         { 
  41.             name: 'links'
  42.             items: ['Link''Unlink''Anchor'
  43.         }, { 
  44.             name: &北京快乐8#39;insert'
  45.             items: ['Image''etranmore''Flash''etranmedia''etranfile''-''Table''HorizontalRule''SpecialChar''equotetext''einserttime''einsertpage''einsertbr''CodeSnippet'
  46.         },&nbs北京快乐8p;
  47.         '北京快乐8/', { 
  48.             name: 'styles'
  49.             items: ['Styles''Format''Font''FontSize'
  50.         }, { 
  51.  &北京快乐8nbsp;          name: 'colors'
  52.             items: ['TextColor',&北京快乐8nbsp;'BGColor'
  53.         }, { 
  54.             name: 'tools'
  55.             items: ['ShowBlocks''NewPage''Templates'
  56.         }, { 
  57.             name: 'others'
  58.             items: ['-'
  59.         }, { 
  60.             name: 'editing'
  61.             groups: ['find''selection''spellchecker'], 
  62.             items: [北京快乐8'Find''Replace''-''SelectAll''Maximize'
  63.         } 
  64.     ]; 
  65.  
  66.  
  67.     // 北京快乐8Toolbar 
  68.     config.toolbar_basic北京快乐8 = [{ 
  69.             name: 'document'
  70.             groups: ['mode''document''doctools'], 
  71.             items: ['Source']&北京快乐8nbsp;
  72.       &nbs北京快乐8p; }, { 
  73.             name: 'clipboard'
  74.             groups: ['clipboard''undo'], 北京快乐8;
  75.             items: ['Cut''Copy''Paste''PasteText''PasteFromWord''-''Undo''Redo'
  76.         }, { 
  77.  &北京快乐8nbsp;          name: 'links'
  78.             items: ['Link''Unlink''Anchor'
  79.         }, { 
  80.             name: 'insert'
  81.             items: ['Image''Table''HorizontalRule''SpecialChar''CodeSnippet'
  82.         }, { 
  83.             name: 'tools'
  84.             items: ['Maximize'
  85.         }, { 
  86.             name: 'others'
  87.   北京快乐8;          items: ['-'
  88.         }, 
  89.         '/', { 
  90.             name: 'basicstyles'
  91.             groups: ['basicstyles''cleanup'], 
  92.             items: [北京快乐8'Bold''Italic'&北京快乐8#39;Strike''-''RemoveFormat'
  93.       &nbs北京快乐8p; }, { 
  94.             name: 'paragra北京快乐8ph'
  95.             groups: ['list''indent',&北京快乐8nbsp;'blocks''ali北京快乐8gn''bidi'], 
  96.             items: ['北京快乐8;NumberedList',&北京快乐8nbsp;'BulletedList''-''Outdent',&北京快乐8nbsp;'Indent''-''Blockquote'
  97.         }, { 
  98.             name: 'styles'
  99.             items: ['Styles''Format'
  100.     &北京快乐8nbsp;   } 
  101.     ]; 
  102.  
  103.  
  104.     config.extraPlugins = 'etranfile,etranmedia,etranmore,autoformat,ecleanalltext,einsertbr,einsertpage,einserttime,equotetext,codesnippet'
  105.     config.codeSnippet_theme = 'monokai_sublime'
  106.     config.toolbar = 'full'
  107. };

就多了北京快乐8codesnippet,所以大家不用担心这段代码对帝国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:

  1. <lin北京快乐8k type="text/css" rel="stylesheet" href="[!--news.url--]skin/weiyiqi/css/monokai_sublime.css"> 
  2. <script src="[!--news.url--]skin/weiyiqi/js/highlight.pack.js"></script>  
  3. <script>hljs.initHighlightingOnLoad();</scrip北京快乐8t> 

路径替换成自己的,monokai_sublime.css是官方推荐的代码高亮显示风格,经过我的测试这个风格显示的代码高亮效果最好,如果你想试试别的风格,可以试试其它css,风格样式都在/e/admin/ecmseditor/infoeditor/plugins/codesnippet/lib/highlight/styles下,你可以切换看效果。

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

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

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

2019年4月28日补充

1.如果在后台编辑文章时想看到跟前台一样的代码高亮效果还需修改上面第二步里的config.js,比如你的高亮风格用的时default.css,那么就把最后

  1. config.codeSnippet_theme = 'monokai_sublime'

改为:

  1. config.codeSnippet_theme = 'default'

2.如果想让代码自适应不出现滚动条,则在.hljs{}里写上:

  1. white北京快乐8-space: pre-wrap; 

魏义齐全栈技术交流:魏义齐web前端技术交流

上一篇:帝国cms编辑文章如何实现代码高亮 下一篇:最后一页

赞助本站

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

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