Emlog博客编辑器版本升级同时加入了代码处理模块

昨天到现在墨迹的整了半天，终于将博客的编辑器kindeditor升级到了最新版本，先来看看样式：

同时将新版ke编辑器的"插入程序代码"模块进行了优化，直接返回着色的代码块，这个功能来源大前端（https://www.daqianduan.com/tools/）的代码工具箱页面，进行了一些整合、修改，这个功能就不再放出方法了，有需要的可以参考syntaxhighlighter这个插件，整合一下即可。个人觉得采用syntaxhighlighter太过臃肿所以没有采用这个插件，最主要是能力有限没有那么多的代码块拿出来分享也就没必要用syntaxhighlighter了。

优化过的"插入程序代码"模块插入的代码显示如下：

<ul id="nav">
 <li><a href="index.php">首页</a></li>
 <li><a href="about.php">关于</a></li>
 <li><a href="case.php">成功案例</a></li>
 <li><a href="demo.php">演示</a></li>
 <li><a href="down.php">下载</a></li>
 <li><a href="doc.php">文档</a></li>
 <li><a href="license.php">授权</a></li>
 <li class="active"><a href="bbs.php">论坛</a></li>
</ul>

个人使用，凑合就行，也就没那么多讲究了。

------------------------------------

以下分享一下升级emlog后台文章编辑器的方法步骤：

针对emlog老版本，原先也写过一篇文章，不过比较老旧了，而且当时那篇文章中也遗留了几个问题没有解决，仅供参看，地址：https://blog.jjonline.cn/otherarticle/kindeditor_update.html

1、下载ke最新版并瘦身

kindeditor最新版下载地址：https://kindeditor.googlecode.com/files/kindeditor-4.1.7.zip

下载后解压，删除jsp、examples、asp.net、asp几个文件夹进行瘦身。我们只需要引用kindeditor-min.js即可，顶层文件夹内的其他几个js文件诸如kindeditor-all-min.js之类的均可删除，如果你的服务器空间不捉急，删不删这几个js文件无所谓啦~

2、将以上瘦身过的文件上传到emlog的./admin/editor中如下图所示

3、修改emlog几个核心引用文件

3.1、修改./admin/views/add_log.php文件

第2行修改，引入新的ke核心文件为如下:

<script charset="utf-8" src="./editor/kindeditor-min.js"></script>
<link rel="stylesheet" href="./editor/themes/default/default.css"/>

第23行修改，修改载入编辑器的新方法[文章主体部分]，修改为如下：

<script>
 contentContent = KindEditor.create('#content',{
 resizeType:1,
 allowFileManager : true,
 filterMode:false,
 wellFormatMode:false,
 cssData : 'body {font-size:15px;font-family:"\5FAE\8F6F\96C5\9ED1", "Microsoft Yahei",Helvetica,Arial,Verdana,"\5B8B\4F53";}pre {margin:15px 0;font:100 12px/18px monaco, andale mono, courier new;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;	word-wrap:break-word;color:#444;}'
 });
</script>

第62行修改，同样是载入编辑器方法[文章摘要部分]，修改如下：

 <script>
 excerptContent = KindEditor.create('#content',{
 resizeType:1,
 allowFileManager : true,
 filterMode:false,
 wellFormatMode:false,
 cssData : 'body {font-size:15px;font-family:"\5FAE\8F6F\96C5\9ED1", "Microsoft Yahei",Helvetica,Arial,Verdana,"\5B8B\4F53";}pre {margin:15px 0;font:100 12px/18px monaco, andale mono, courier new;padding:10px 12px;border:#ccc 1px solid;border-left-width:4px;background-color:#fefefe;box-shadow:0 0 4px #eee;word-break:break-all;	word-wrap:break-word;color:#444;}'
 });
 </script>

3.2、同理修改./admin/views/add_page.php文件不再赘述

3.3、同理修改./admin/views/edit_log.php文件不再赘述

3.4、同理修改./admin/views/edit_page.php文件不再赘述

不知道大家注意没有，3.1中修改23行时有个新变量contentContent、62行时有个新变量excerptContent；这个时候就要修改./admin/views/js/common.js文件了

3.5、修改./admin/views/js/common.js

该文件的最开始位置添加一个变量声明代码：

var contentContent,excerptContent;

然后修改该文件的113、120两行处的两个插入文件函数中的代码块，将函数addattach_img、函数addattach_file优化[优化这两个函数的原因是升级了ke版本导致的ke的某些api需要调整]，直接上两个修改后的函数的代码块。

function addattach_img(fileurl,imgsrc,aid){
 if (contentContent.options.designMode == false){
 alert('请先切换到所见所得模式');
 }else if(imgsrc != "") {
 contentContent.insertHtml('<a target=\"_blank\" href=\"'+fileurl+'\" id=\"ematt:'+aid+'\"><img src=\"'+imgsrc+'\" alt=\"点击查看原图\" border=\"0\"></a>');
 }
}
function addattach_file(fileurl,filename,aid){
 if (contentContent.options.designMode == false){
 alert('请先切换到所见所得模式');
 } else {
 contentContent.insertHtml('<a target=\"_blank\" href=\"'+fileurl+'\" >'+filename+'</a>');
 }
}

然后140行的autosave函数中的获取编辑器内的内容也需要变动：

将147行改为

var content = contentContent.html();

将171、172行改为

var content = contentContent.html();
var excerpt = excerptContent.html();

关键地方搞定收工，但还有一个最要命的安全问题需要解决。ke自带的上传模块被启用，故而php上传脚本的权限需要控制下。当然，如果你不需要新版ke的上传图片、文件模块，可以通过引入ke时指定，这块请参考ke官方文档。

4、php安全执行代码块修改

修改./admin/editor/php/JSON.php即可，在该文件的开头添加如下代码，这是最简单的，但也有缺陷，具体缺陷不再啰嗦，因为只判断了cookie，而cookie是可以被伪造的。

include '../../../config.php';
if(!isset($_COOKIE[AUTH_COOKIE_NAME])) {
 exit('<script>alert("Please Login At Firest!!");</script>'); 
}

安全性PHP代码执行补充：

经过研究emlog代码逻辑，安全的控制ke中自带的浏览服务器、上传文件到服务器的控制方法的代码段如下，请弃用上方的简单判定登录状态代码段，采用如下代码段添加到JSON.php文件开头即可：

include '../../../config.php';
include '../../../include/lib/mysql.php';
include '../../../include/lib/function.login.php';
if(!isLogin()) {
 exit('<script>alert("Please Login At Firest!!");</script>'); 
}

5、如果有调用了em相册的博主，那么主体内容编辑区域上方的“插入相片”功能也需要优化部分代码方可正常的在编辑器内插入em相册中的图片。

修改content/plugins/kl_album/kl_album_log_photo_lib.php文件即可。修改该文件中的相关js代码区块，具体位置没记录，修改如下：

<script type="text/javascript">
function addPhoto(url,width,height)
{
 if (parent.contentContent.options.designMode == false){
     alert('请先切换到所见所得模式');
 }else {
     //alert(parent.contentContent.designMode);
     parent.contentContent.insertHtml('<a target=\"_blank\" href=\"'+url+'\"><img src=\"'+url+'\" width=\"'+width+'\" height=\"'+height+'\" alt=\"点击查看原图\" border=\"0\"></a>');
 }
}
</script>