当前位置:首页 > 代码学习 > [emlog]emlog集成kindeditor4.1.1教程

[emlog]emlog集成kindeditor4.1.1教程

作者:星之宇 ┊ 时间:2012-7-6 17:41 ┊ 分类: 代码学习 ┊ 阅读:8729 ┊ 评论:1

现在kindeditor已经更新到4.1.1,增加了很多新功能,修复了很多新bug。
如果你觉得emlog自带的老版本编辑器好用的就不要更新新版本了,至少我觉得还是老版本好用,但是我打开了全功能版本。

更新新版的kindeditor很麻烦,应该很多东西和老版本不一样了。既然说了是教程,那么就一定要emlog把新的kindeditor用起来,至少内容肯定要可以编辑的,写入,修改的。
 
1.首先是下载最新版本的kindeditor。这个大家去官网下载,不多说了。

2.要修改的文件
admin/views文件夹下4个php和一个js文件,如下
add_log.php 添加日志
add_page.php 添加页面
edit_log.php 修改日志
edit_page.php 修改页面
js文件夹下common.js 自动保存

3.删减kindeditor-4.1.1文件,只保留
attached  (编辑器上传存放文件夹)
lang    (语言文件夹)
php   (php组件文件夹,如上传组件)
plugins (编辑器插件文件夹)
themes (编辑器皮肤)
kindeditor-min.js (js压缩文件)
这个其中还有一些无用的东西,我就不一一说明了,还有可以删去的东西。
把上述东西方法admin/kindeditor文件夹下。


4.下面是具体修改emlog的文件。
add_log.php和edit_log.php文件的修改的地方相同,修改如下:

第一处:

<script charset="utf-8" src="./editor/kindeditor.js"></script>
改为

<script charset="utf-8" src="./kindeditor/kindeditor-min.js"></script>

<script type="text/javascript" charset="utf-8" src="./kindeditor/lang/zh_CN.js"></script>


第二处:
<textarea id="content" name="content" cols="100" rows="8" style="width:719px; height:460px;"></textarea>
<script>loadEditor('content');</script>
改为
<textarea id="editor_content" name="content" cols="100" rows="8" style="width:719px; height:460px;"></textarea>

第三处:
<textarea id="excerpt" name="excerpt" style="width:719px; height:260px; border:#CCCCCC solid 1px;"></textarea>
<script>loadEditor('excerpt');</script>
改为
<textarea id="editor_excerpt" name="excerpt" style="width:719px; height:260px; border:#CCCCCC solid 1px;"></textarea>

第四处:
在代码最后加上
<script>
        var editor_content;
        KindEditor.ready(function(K) {
                KindEditor.instances[0] = K.create('#editor_content');
        });
var editor_excerpt;
        KindEditor.ready(function(K) {
                KindEditor.instances[1] = K.create('#editor_excerpt');
        });
</script>

add_page.php和edit_ page.php文件的修改的地方相同,修改如下: 

第一处:

<script charset="utf-8" src="./editor/kindeditor.js"></script>
改为

<script charset="utf-8" src="./kindeditor/kindeditor-min.js"></script>

<script type="text/javascript" charset="utf-8" src="./kindeditor/lang/zh_CN.js"></script>


第二处:
<textarea id="content" name="content" style="width:719px; height:460px; border:#CCCCCC solid 1px;"></textarea>
<script>loadEditor('content');</script>
改为
<textarea id="editor_content" name="content" style="width:719px; height:460px; border:#CCCCCC solid 1px;"></textarea>

第三处:
在代码最后加上
<script>
        var editor_content;
        KindEditor.ready(function(K) {
                KindEditor.instances[0] = K.create('#editor_content');
        });
</script>

common.js 文件修改
第一处:
function addattach(imgurl,imgsrc,aid){
if (KE.g['content'].wyswygMode == false){
alert('请先切换到所见所得模式');
}else {
KE.insertHtml('content','<a target=\"_blank\" href=\"'+imgurl+'\" id=\"ematt:'+aid+'\"><img src=\"'+imgsrc+'\" alt=\"点击查看原图\" border=\"0\"></a>');
}
}
改为
function addattach(imgurl,imgsrc,aid){
   KindEditor.instances[0].exec('inserthtml','<a target=\"_blank\" href=\"'+imgurl+'\" id=\"ematt:'+aid+'\"><img src=\"'+imgsrc+'\" alt=\"点击查看原图\" border=\"0\"></a>');
}

第二处:
var content = KE.html('content');
改为
var content = KindEditor.instances[0].html();
这个有2处要改

第三处:
var excerpt = KE.html('excerpt');
改为
var excerpt = KindEditor.instances[1].html();

还有如果用编辑器的上传不行的,可以配置下路径,这里emlog的那个附件功能能正常使用,我就不去弄那个上传功能了。
差不多功能多能用了,这个只用做测试的。
嫌自己改麻烦的请看日志:http://www.myxzy.com/kindeditor4em.html
目前有 1 条评论
avatar
7S分享站 2017-11-05 22:29回复1楼
博主看来对代码是非常熟悉了,写了这么多代码