KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化了，下面我们就一起来看看phpweb更换kindeditor编辑器的过程，希望文章可帮助到各位。

都知道phpweb自带的编辑器很不好用,有的时候提交会出现很多问题,今天开始动工把phpweb的编辑器给换了,首先更换news 模块下的编辑器.

1.到kindeditor 官方网站上面下载最新的kindeditor包。

2.删除不用的文件夹，asp,jsp等

3.把kindeditor 的文件夹放入phpweb 根目录下

4.打开news/admin/news_conadd.php 大概108行处,代码如下:

1. <input type=”hidden” name=”body” value=”<?php echo $body; ?>” /> 
2. <script type=”text/javascript” src=”../../kedit/KindEditor.js”></script> 
3. <script type=”text/javascript”> 
4. var editor = new KindEditor(“editor”); 
5. editor.hiddenName = “body”; 
6. editor.editorWidth = “680px”; 
7. editor.editorHeight = “300px”; 
8. editor.skinPath = “../../kedit/skins/default/”; 
9. editor.uploadPath = “../../kedit/upload_cgi/upload.php”; 
10. editor.imageAttachPath=”news/pics/”; 
11. editor.iconPath = “../../kedit/icons/”; 
12. editor.show(); 
13. function KindSubmit() { editor.data(); } </script>

更换为如下代码:

1. <script charset=”utf-8″ src=”../../kindeditor/kindeditor.js”></script> 
2. <script charset=”utf-8″ src=”../../kindeditor/lang/zh_CN.js”></script> 
3. <script> 
4. var editor; 
5. KindEditor.ready(function(K) { 
6. editor = K.create(‘#editor_id’,{ 
7. width:’680px’, 
8. height:’300px’, 
9. uploadJson:’upload_json.php’, 
10. fileManagerJson : ‘file_manager_json.php’, 
11. allowFileManager : true, 
12. syncType:”form”, afterCreate : function() { var self = this; self.sync(); }, afterChange : function() { var self = this; self.sync(); }, afterBlur : function() { var self = this; self.sync(); } }); }); </script> 
13. <textarea  name=”body” id=”editor_id” style=”width:680px;height:300px;”/><?php echo $body;?></textarea> 

注意:红色标注处,按照官方提供的demo.php文件中写的方法,得不到textarea 里面的内容.复制kindeditorphp文件夹下面upload_json.php和file_manager_json.php (新版中存在 JSON.php也一起复制)文件到newsadmin下 修改2个文件

1. //文件保存目录路径 $save_path = $php_path . ‘../attached/'; //文件保存目录URL $save_url = $php_url . ‘../attached/'; 
2. 为 
3. //文件保存目录路径 $save_path = $php_path . ‘../pics/'; //文件保存目录URL $save_url = $php_url . ‘../pics/'; //开源软件:phpfensi.com 

碰到问题:

kindeditor 用ajax提交会出现如下问题,提交第二次才能获取到真实的值,用如下方法解决.

加一个,afterChange: function (e) {this.sync()} 同步下数据即可,替换就ok：

Tags: phpweb编辑器 kindeditor编辑器

分享到：