在页面使用kindeditor编辑器时,有以下步骤:
[1]下载kindeditor压缩包
下载地址 :http://kindeditor.googlecode.com/files/kindeditor-4.1.9.zip
[2]在项目中引入kindeditor文件夹,如下图:
[3]在页面中如edit.jsp中引入kindeditor.js
<script type="text/javascript" charset="UTF-8" src="../js/jquery-1.4.2.min.js"></script>
<script charset="utf-8" src="../common/kindeditor/kindeditor.js"></script>
<script charset="utf-8" src="../common/kindeditor/lang/zh_CN.js"></script>
[4]创建一个textarea,如下:
<td width="15%" height="28">内容<span style="color: red">*</span></td>
<td height="35" colspan="3">
<textarea id="PCONTENT" name="PCONTENT" rows="60"
style="width:90%; margin:0 auto; background:url(../images/biaodan/textarea_bg.gif) repeat-x #fff; border:1px solid #CDCDCD; overflow:auto;">
</textarea>
</td>
[5]在页面加载完成后,出事后编辑器
<script>
KindEditor.ready(function(K) {
window.editor = K.create('#PCONTENT');
});
</script>
至此,kindeditor就能生效了。
如果运行正常,效果如下:
但是,如果你不是用php开发系统的话,那么,你的图片上传是不能使用的,因为kindeditor中默认的使用的是php作为action。
下面说明文件上传的配置:(以jsp开发为例)
[6]在plugin/image.js中修改,上传处理的action路径
找到选中的部分
替换成:
这样就是用jsp/upload_json.jsp来处理文件的上传。
[7]配置上传文件路径
打开jsp/upload_json.jsp文件,找到如下位置:
配置为你对应的目录即可,注意文件保存路径和访问路径的一致性。
当然,这个目录需要在context下面,注意路径就可以了。
图片上传功能,其实不用配置也可以实现,就是在编辑器初始化时,直接设置,如下:
KindEditor.ready(function(K) {
window.editor = K.create('#PCONTENT',{
uploadJson:'../common/kindeditor/jsp/upload_json.jsp',
fileManagerJson:'../common/kindeditor/jsp/file_manager_json.jsp',
allowFileManager : true
});
});
根据需要配置upload_json.jsp中的文件的文件上传路径,如果用默认的,需要在应用的根目录下面创建attached目录。
如果配置量文件上传的路径,需要注意upload_json.jsp和file_manager_json.jsp两个文件中配置的一致性。
|----------------------------------------------------------------------------------------|
版权声明 版权所有 @zhyiwww
引用请注明来源 http://www.blogjava.net/zhyiwww
|----------------------------------------------------------------------------------------|
posted on 2013-10-31 17:32
zhyiwww 阅读(1450)
评论(0) 编辑 收藏 所属分类:
javascript