使用easyui的时候，夏季老师给了一个使用kindeditor的扩展JS插件，把代码贴上去之后就可以实现kindeditor的大部分功能了:链接地址
但是，这里发现文件上传老是报错，经过分析，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" 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>// //$("#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配置文件中添加一个常量设置：
经过分析，由于struts2的ActionServlet在接收到multipart请求之后，在RequestProcessor中会对request进行封装：MultiRequestWrapper，然后在Action执行完之后，又将已经封装的request重新还原，所以这里的kindeditor的上传代码upload_json.jsp稍作修改
MultiPartRequestWrapper wrapper = (MultiPartRequestWrapper)request;String fileName = wrapper.getFileNames("imgFile")[0];//imgFile，imgFile，imgFileFile file = wrapper.getFiles("imgFile")[0];//检查扩展名String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();if(!Arrays. 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());