帝国cms编辑器更换为百度编辑器并成功实现前台代码高亮和自适应

熬了一个晚上，总算是把这个问题解决了，本文整合了网上四篇文章分为三个部分：帝国自带编辑器更换为百度编辑器、实现代码高亮效果和高亮效果的代码自适应。

先说说我折腾的过程吧（忍不住想写，着急的朋友可以直接看下面的步骤）：作为一个搞技术的，代码高亮带来的SEO效果就不说了，自己看着都掉价，首先我想到的是给帝国本身的编辑器增加代码高亮插件，于是搜“帝国cms编辑器增加代码高亮插件”之类的关键词，大致有两个，一个是帝国论坛里的文章“[原创]帝国ECMS7.5默认编辑器添加代码高亮（http://bbs.phome.net/showthread-42-359245-0.html）”，但这篇文章写的太过于粗糙，我也尽量揣摩了作者字里行间可能的意思，试了两次，说的那个代码工具图标始终不显示，其实细看文中截图，作者的编辑器跟帝国7.5根本不是同一个；还有一篇是“帝国CMS FCKeditor编辑器添加插入代码插件方法（基于SyntaxHighlighter代码高亮插件）（https://www.daixiao360.cn/dgcj/270.html）”，乍看效果跟我phpcms站的代码高亮效果一样，但是浏览该站其它文章，发现有个缺陷，复制代码的时候前面的序号也复制上了，这就很不爽了，再说文章本身，中英文的双引号和单引号都不分：

说的js文件名称错误，要查找的代码也不存在，在我要放弃的时候忽然想到可不可以把我phpcms站的编辑器ckeditor换到帝国上，然后把那个代码高亮插件整合进来（详情戳：phpcms代码高亮显示最新解决方案），编辑器我是换了，但是原文第五步：

增加codeblock我就不知道该如何在帝国里操作了，所以这个放弃，然后接着瞎搞，我甚至按网上的教程搞了五个编辑器在帝国后台切换着用：

最终换了百度编辑器，其实一开始我就换了百度编辑器但是发现代码高亮效果在前台不展示，所以才走了后面那么多弯路，之所以再次回到百度编辑器上，是我想可否在代码高亮效果上下功夫，于是，这个问题就慢慢解决了。下面是重点，步骤来了：

第一步：替换编辑器为百度编辑器

下载百度编辑器：https://pan.baidu.com/s/1xL9KbLAcxZazd6PPVgqikg

提取码：xsnn，解压后将ueditor文件夹复制到/e/extend/下，然后进入后台→系统→数据表与系统模型→管理数据表→管理字段（在你使用的系统模型上点）→修改newstext字段→在“输入表单替换html代码”和“投稿表单替换html代码”替换原来的的代码为下面这个文件里的代码（替换前做好原来的备份，以便恢复）：

更换百度编辑器需要替换的代码

如果你改了后台路径，打开文件/e/extend/ueditor/ueditor.toolbarconfig.js,直接搜admin，改为你的后台路径，更新数据库缓存，这个时候编辑文章你就可以看到编辑器已更换为百度编辑器：

百度编辑器的功能比较丰富，比如代码高亮，还有些特色功能比如百度地图。

到这没有完，因为你发现虽然使用了高亮插件但是前台页面没效果，这是因为内容页模板缺乏引入文件造成的。

第二步：内容页模板引入文件

如果上面你是按步骤操作的，那么在内容页模板头部引入以下文件：

<link href="/e/extend/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="/e/extend/ueditor/third-party/SyntaxHighlighter/shCore.js"></script> 
<script type="text/javascript"> 
 SyntaxHighlighter.all(); 
</script>

自此，高亮效果就出来的，但还有一些问题是必须要解决的，比如代码行间距太小、不自适应。

第三步：美化高亮效果

打开文件/e/extend/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css

改行高：开始的通配样式里把行高1.1改为1.5；

改自适应：在.syntaxhighlighter {}里写入word-break:break-all即可。

我就改了这两个，别的美化可自行修改。

到这已经没什么问题了，但又发现一个小问题，就是有代码的文章再次编辑时编辑器里代码显示混乱，这里我想到phpcms的一个函数htmlspecialchars_decode，这个函数就是把一些预定义的HTML实体转换为字符，在phpcms里注销这个函数就能解决这个问题，帝国cms里是否也一样呢？于是百度“帝国cms htmlspecialchars”找到了文章“帝国CMSehtmlspecialchars()，文章链接：http://diguocms.com/functions/ehtmlspecialchars/”，按照其函数说明的位置找到了文中的那段函数注销，球了，后台空白，注销了里面一些语句也是不起效果，哪位大神知道这个问题怎么解决可在下方评论区评论出来。

想过是帝国的问题，按百度说的系统→系统参数设置→信息设置→模板支持程序代码和模板支持程序代码标签都开启，但没什么卵用。

这个问题也不算是什么大问题了，再次编辑文章删除原来的代码，复制前台文章里的代码，Ctrl+shift+v无格式粘贴就好了。

本文参考文章：

1.帝国CMS编辑器怎么替换为百度编辑器？（https://blog.csdn.net/abc2575/article/details/81452400）；

2.帝国cms-百度编辑器ueditor代码高亮效果前台不显示的解决方法（https://www.moyublog.com/notes/463.html）；

3.百度编辑器前端代码高亮、行距过小解决办法（https://www.pw88.com/teach/seo/274.html）；

4.让百度编辑器ueditor的高亮代码自动适应设备宽度及自动换行（http://www.dawnfly.cn/article-1-198）。

本文完！