Kindeditor 结合easyui与strturs文件上传与实现

使用easyui的时候，夏季老师给了一个使用kindeditor的扩展JS插件，把代码贴上去之后就可以实现kindeditor的大部分功能了:链接地址 http://www.jeasyuicn.com/extended-easyui-based-on-kindeditor.html  
但是，这里发现文件上传老是报错，经过分析，JS插件没有指定上传Action路径，于是呢：

(function ($, K) {
    if (!K)
        throw "KindEditor未定义!";

    function create(target) {
        
        var opts = $.data(target, 'kindeditor').options;
        var path = getRootPath();
        var editor = K.create(target, {

            cssPath : path+'/kindEditor/plugins/code/prettify.css',
            uploadJson : path+'/kindEditor/jsp/upload_json.jsp',
            fileManagerJson : path+'/kindEditor/jsp/file_manager_json.jsp',
            allowFileManager : true,
        });
        
        $.data(target, 'kindeditor').options.editor = editor;
    }
    
    function getRootPath(){ 
        var curWwwPath=window.document.location.href; 
        var pathName=window.document.location.pathname;
        var pos=curWwwPath.indexOf(pathName); 
        var localhostPaht=curWwwPath.substring(0,pos);  
        var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
        return(localhostPaht+projectName); 
    }

    $.fn.kindeditor = function (options, param) {
        if (typeof options == 'string') {
            var method = $.fn.kindeditor.methods[options];
            if (method) {
                return method(this, param);
            }
        }
        options = options || {};
        return this.each(function () {
            var state = $.data(this, 'kindeditor');
            if (state) {
                $.extend(state.options, options);
            } else {
                state = $.data(this, 'kindeditor', {
                        options : $.extend({}, $.fn.kindeditor.defaults, $.fn.kindeditor.parseOptions(this), options)
                    });
            }
            create(this);
        });
    }

    $.fn.kindeditor.parseOptions = function (target) {
        return $.extend({}, $.parser.parseOptions(target, []));
    };

    $.fn.kindeditor.methods = {
        editor : function (jq) {
            return $.data(jq[0], 'kindeditor').options.editor;
        }
    };

    $.fn.kindeditor.defaults = {
        resizeType : 1,
        allowPreviewEmoticons : true,
        allowImageUpload : true,
        allowFileManager : true,
        items : [
                    'source', '|', 'fullscreen', 'undo', 'redo', 'print', 'cut', 'copy', 'paste',
                    'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                    'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                    'superscript', '|', 'selectall', '-',
                    'title', 'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold',
                    'italic', 'underline', 'strikethrough', 'removeformat', '|', 'image',
                    'flash', 'media', 'advtable', 'hr', 'emoticons', 'link', 'unlink', '|', 'about'],
        afterChange:function(){
            this.sync();//这个是必须的,如果你要覆盖afterChange事件的话,请记得最好把这句加上.
        }
    };
    $.parser.plugins.push("kindeditor");
})(jQuery, KindEditor);

jsp引入
<link rel="stylesheet" href="kindEditor/themes/default/default.css" />
<link rel="stylesheet" href="kindEditor/plugins/code/prettify.css" />
<script charset="utf-8" src="kindEditor/kindeditor.js"></script>
<script charset="utf-8" src="kindEditor/lang/zh_CN.js"></script>
<script charset="utf-8" src="kindEditor/plugins/code/prettify.js"></script>

　<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
　<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
　<script type="text/javascript" src="easyui/jquery-1.8.2.js"></script>
　<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
　<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
　<script type="text/javascript" src="easyui/plugins/jquery.fullcalendar.js?v=0.7"></script>
　<script type="text/javascript" src="js/KindEditor.js" ></script>

//<textarea class="easyui-kindeditor" style="width:100%;height:200px;visibility:hidden;">KindEditor</textarea> //$("#kindeditor").kindeditor({....});

  <textarea class="easyui-kindeditor" id="kindeitor" name="content1" style="width:100%;height:200px;visibility:hidden;">KindEditor</textarea>

到这里基本实现了easyUi与kindeditor的整合

2、文件上传
指定struts2的上传路径

struts.multipart.saveDir = /tmp

或者也可以在struts.xml配置文件中添加一个常量设置：

<constant name="struts.multipart.saveDir" value="/tmp"></constant>

经过分析，由于struts2的ActionServlet在接收到multipart请求之后，在RequestProcessor中会对request进行封装：MultiRequestWrapper，然后在Action执行完之后，又将已经封装的request重新还原，所以这里的kindeditor的上传代码upload_json.jsp稍作修改

MultiPartRequestWrapper wrapper = (MultiPartRequestWrapper)request;

String fileName = wrapper.getFileNames("imgFile")[0];//imgFile，imgFile，imgFile
File file = wrapper.getFiles("imgFile")[0];


//检查扩展名
String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
if(!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)){
    out.println(getError("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。"));
    return;
}

//检查文件大小
if(file.length() > maxSize){
    out.println(getError("上传文件大小超过限制。"));
    return;
}


//重构上传图片的名称  
//经过分析，发现struts的ActionServlet在接收到multipart请求之后，在RequestProcessor中会对request进行封装：MultiRequestWrapper，然后在Action执行完之后，又将已经封装的request重新还原。
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
String newImgName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
byte[] buffer = new byte[1024];
//获取文件输出流
FileOutputStream fos = new FileOutputStream(savePath +"/" + newImgName);
InputStream in = new FileInputStream(file);
try{
    
    int num = 0;
    while((num=in.read(buffer))>0){
        
        fos.write(buffer,0, num);
    };
    
}catch(Exception e){
    
    //e.printStackTrace();
    out.println(getError("上传文件失败。"));
    return;
}finally{
    in.close();
    fos.close();

}

JSONObject obj = new JSONObject();
obj.put("error", 0);
obj.put("url", saveUrl + newImgName);
out.println(obj.toJSONString());

 

 

 

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/molao-doing/articles/3544565.html