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

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

帝国cms编辑文章如何实现代码高亮

发布时间:2019-04-22 00:39:12作者:魏义齐阅读:()

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

在文章“帝国cms编辑器更换为百度编辑器并成功实现前台代码高亮和自适应”中以更换百度编辑器的方式解决了代码高亮问题,但是文末残留了一个小问题就是有代码的文章再次编辑代码显示错乱,这个问题不管是从百度编辑器还是帝国cms方面始终没有找到解决方法,并且百度编辑器2016后就没有再更新,近期又被腾讯爆出存在严重安全漏洞,详见:https://cloud.tencent.com/developer/news/379120,所以从安全角度考虑还是不要更换帝国本身的编辑器,那么解决代码高亮只能集成第三方插件了。

第一步:下载最新版的百度编辑器(也就是1.4.3.3 PHP 版本),把third-party下面的SyntaxHighlighter文件夹复制到你网站的根目录,然后在文章页模板调用:
  1. <link href="[!--news.url--]SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css" />  
  2. <script type="text/javascript" src="[!--news.url--]SyntaxHighlighter/shCore.js"></script>  
  3. <script type="text/javascript">  
  4.  SyntaxHighlighter.all();  
  5. </script> 

不要去找SyntaxHighlighter官方下载,下载下来没有这两个文件。

第二步:这里借用青姐整理的:

  1. <pre class="brush:as3;toolbar:false">ActionScript3</pre> 
  2. <pre class="brush:bash;toolbar:false">Bash/Shell</pre> 
  3. <pre class="brush:css;toolbar:false;">Css</pre> 
  4. <pre class="brush:cpp;toolbar:false;">C/C++</pre> 
  5. <pre class="brush:cf;toolbar:false">CodeFunction</pre> 
  6. <pre class="brush:c#;toolbar:false">C#</pre> 
  7. <pre class="brush:delphi;toolbar:false">Delphi</pre> 
  8. <pre class="brush:diff;toolbar:false">Diff</pre> 
  9. <pre class="brush:erlang;toolbar:false">Erlang</pre> 
  10. <pre class="brush:groovy;toolbar:false;">Groovy</pre> 
  11. <pre class="brush:html;toolbar:false">Html</pre> 
  12. <pre class="brush:java;toolbar:false">Java</pre> 
  13. <pre class="brush:jfx;toolbar:false">JavaFx</pre> 
  14. <pre class="brush:js;toolbar:false">javascript</pre> 
  15. <pre class="brush:pl;toolbar:false">perl</pre> 
  16. <pre class="brush:php;toolbar:false">php</pre> 
  17. <pre class="brush:plain;toolbar:false">plainText</pre> 
  18. <pre class="brush:ps;toolbar:false">PowerShell</pre> 
  19. <pre class="brush:python;toolbar:false">Python</pre> 
  20. <pre class="brush:ruby;toolbar:false">Ruby</pre> 
  21. <pre class="brush:scala;toolbar:false">Scala</pre> 
  22. <pre class="brush:sql;toolbar:false">Sql</pre> 
  23. <pre class="brush:vb;toolbar:false">Vb</pre> 
  24. <pre class="brush:xml;toolbar:false">Xml</pre> 

第三步:使用

先点击编辑器左上角的源码,此时编辑器里所有东西都成为源码格式,找到需要插入代码的地方,比如要插入一段html代码,那就复制“<pre class="brush:html;toolbar:false">Html</pre>”到源码里,然后再次点击源码,此时恢复排版效果,粘贴的“<pre class="brush:html;toolbar:false">Html</pre>”只会显示一个html,用需要插入的html代码替换掉html,发布文章后前台页面里的代码就会有高亮效果,而且再次编辑也不会错乱。

这里其实就是反向思维,插入了html代码再次编辑时编辑器里显示的是html代码的浏览器解析效果或者说浏览器预览效果,如果不做更改保存之后前台页面显示的也是浏览器解析效果,而我们需要的是代码,要想代码不被解析,那就让代码变成文本,也就是上面的操作过程。

这个方法虽然是半手动,但是对帝国cms的安全性没有任何影响,因为只用了一个js文件和一个css文件,这两个文件完全可以设置为只读。

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

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

上一篇:帝国cms解决代码高亮方法二下一篇:帝国cms小问题集合:https登录后台空白、彻底更换域名、批量替换字段值传递参数有误

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

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

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

最新会员
  • weiyiqi