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行处,代码如下:
<input type="hidden" name="body" value="<?php echo $body; " /> <script type="text/javascript" src="../../kedit/KindEditor.js"></script> <script type="text/javascript"> var editor = new KindEditor("editor"); editor.hiddenName = "body"; editor.editorWidth = "680px"; editor.editorHeight = "300px"; editor.skinPath = "../../kedit/skins/default/"; editor.uploadPath = "../../kedit/upload_cgi/upload.php"; editor.imageAttachPath="news/pics/"; editor.iconPath = "../../kedit/icons/"; editor.show(); function KindSubmit() { editor.data(); } </script>
更换为如下代码:
<script charset="utf-8″ src="../../kindeditor/kindeditor.js"></script> <script charset="utf-8″ src="../../kindeditor/lang/zh_CN.js"></script> <script> var editor; KindEditor.ready(function(K) { editor = K.create('#editor_id',{ width:'680px', height:'300px', uploadJson:'upload_json.php', fileManagerJson : 'file_manager_json.php', allowFileManager : true, syncType:"form", afterCreate : function() { var self = this; self.sync(); }, afterChange : function() { var self = this; self.sync(); }, afterBlur : function() { var self = this; self.sync(); } }); }); </script> <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个文件
//文件保存目录路径 $save_path = $php_path . '../attached/'; //文件保存目录URL $save_url = $php_url . '../attached/'; 为 //文件保存目录路径 $save_path = $php_path . '../pics/'; //文件保存目录URL $save_url = $php_url . '../pics/';
碰到问题:
kindeditor 用ajax提交会出现如下问题,提交第二次才能获取到真实的值,用如下方法解决.
加一个,afterChange: function (e) {this.sync()} 同步下数据即可,替换就ok:
永久地址:
转载随意~请带上教程地址吧^^