kindeditor（一）实现图片上传jsp实现

最近应项目需求要求实现富文本编辑器的功能，曾经用ckeditor实现过，首先尝试用它实现，但是虽然ck有强大的功能，但是其界面风格比较刻板，修改起来比较困难而且，图片上传功能修改源码的话很繁琐，自己也尝试修改了一些，但是效果与UE需求相差较远，于是想到了kingeditor，确实简单易上手，废话不说，开始介绍如何配置运行成功。

1. 官网下载ckeditor，解压后去掉不需要的部分，仅需保留plugin,lang,theme文件夹，这三个文件夹中用不到的东西可以删除，比如lang文件下存放所有语言文件js，仅仅保留en.js和zh_CN.js即可，保留jsp文件夹下的json_upload.jsp文件和kindeditor.js文件即可
2. 配置使用ckeditor  

 //加载kindeditor
       KindEditor.ready(function(K) {
    var editor = K.create('textarea[name="messageContent"],textarea[name="updateMessageContent"]', {
     uploadJson : '${ctx}/static/common/kindeditor-4.1/jsp/upload_json.jsp', //指定上传图片的服务器端程序
     allowUpload : true,
     urlType : 'absolute',
                 resizeType : 0,  //文本框不可拖动
     items : [  //配置工具栏
        'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
        'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
        'insertunorderedlist', '|', 'emoticons', 'image', 'link'],
        
        afterCreate : function(){ //kindeditor创建后，将编辑器的内容设置到原来的textarea控件里
               this.sync();  
        },
        afterChange: function(){ //编辑器内容发生变化后，将编辑器的内容设置到原来的textarea控件里
               this.sync();  
        },
        afterBlur : function(){ //编辑器聚焦后，将编辑器的内容设置到原来的textarea控件里
            this.sync();
        } 
    });

首先 name=messageContent,是textarea的name属性

 uploadJson部分是请求图片上传处理的jsp，即json_upload.jsp。注意路径写对就可以完成。关于如何配置详细参数请参考点击打开链接

修改json_upload.jsp文件保存路径即可修改一下两句即可。

//文件保存目录路径
String savePath = pageContext.getServletContext().getRealPath("/upload");

//文件保存目录URL,此处为绝对路径
String saveUrl  = request.getContextPath()+"/upload";

 

附截图