您的位置:晶晶的博客>前端>Emlog博客编辑器版本升级同时加入了代码处理模块

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>
转载请注明本文标题和链接:《Emlog博客编辑器版本升级同时加入了代码处理模块

相关推荐

哟嚯,本文评论功能关闭啦~

  1. #1

    测试一下

    小强 7年前 (2016-12-23) 回复
  2. #2

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

    Wholesale Jerseys 8年前 (2016-08-28) 回复
    • @Wholesale Jerseys:

      小强 7年前 (2016-12-23) 回复
  3. #3

    文章写的不错,赞一个!

    浦西论坛 11年前 (2013-09-10) 回复