富文本编辑器kindeditor批量上传图片并生成缩略图

一、使用富文本编辑器kindeditor需引入文件如下：

<script charset="utf-8" src="<%=path %>/skin/js/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="<%=path %>/skin/js/kindeditor/lang/zh-CN.js"></script>

二、编辑器初始化

K.create('textarea[name="nr"]'中的name要使用页面中textarea 的name

urlType：定义了上传图片的相对路径其他参数（”absolute”、”domain”），默认为“”

item：定义显示的各个小图标

uploadJson：定义请求的后台地址

filePostName：注意这个参数他表示图片的name，后台接受的时候一定要名字一样

allowImageUpload：设置为true

<script type="text/javascript">
var editor;
KindEditor.ready(function(K) {
	editor = K.create('textarea[name="nr"]', {
		//resizeType : 1,
		urlType:"relative",
		items : [
	        'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
	        'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
	        'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
	        'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
	        'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
	        'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'multiimage',
	         'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
	        'anchor', 'link', 'unlink', '|', 'about'
	         ],
		uploadJson : context+"/xinwen/upload" ,//后台上传调用方法地址，返回json格式
		filePostName: 'imgFiles',//类似于定义input的name
		//allowPreviewEmoticons : true,
		 allowImageUpload : true,
        afterCreate : function() {
            var self = this;
        },
        afterBlur:function(){this.sync();},
		
	});
});		




</script>

三、html代码

 <textarea id="addeditor_id" name="nr" style="width:58%;height:600px;border: 0 none;  visibility:hidden;"></textarea>

四、java后台

       /**
	     * 文件上传公共方法
	     * 
	     * @param response
	     * @param request
	     * @param imgFile
	     *            单文件
	     * @return
	     */
	    public Map<String, Object> uploadImg(HttpServletResponse response, HttpServletRequest request,
	            MultipartFile imgFile) {
	        response.setContentType("text/plain;charset=UTF-8");
	        Map<String, Object> map = new HashMap<String, Object>();
	        // 文件保存目录URL
	        //String saveUrl = "upload/img/";
	       // String saveUrl = "upload/";
	        String saveUrl = request.getServletContext().getRealPath("/upload//");
	         //String saveUrl = request.getServletContext().getContextPath();
	        // 最大文件大小
	        long maxSize = 102400000;

	        if (imgFile == null) {
	            return returnErrorMap("请选择文件!");
	        }
	        String imgFileFileName = imgFile.getOriginalFilename();
	        String fileType = imgFileFileName.substring(imgFileFileName.lastIndexOf(".") + 1).toLowerCase();// 文件类型
	        Map<String, String> fileTypeMap = new HashMap<String, String>();
	        fileTypeMap.put("image", "gif,jpg,jpeg,png,bmp");
	        if (fileTypeMap.containsKey(fileType)) {
	            return returnErrorMap("上传文件扩展名[" + fileType + "]是不允许的扩展名。");
	        }
	        if (imgFile.getSize() > maxSize) {
	            return returnErrorMap(
	                    "[ " + imgFileFileName + " ]超过单个文件大小限制，文件大小[ " + imgFile.getSize() + " ]，限制为[ " + maxSize + " ] ");
	        }
	        String newFileName =  UUID.randomUUID().toString().replaceAll("-","") + "." + fileType;// 重新命名
	        try {
	            FileUtils.copyInputStreamToFile(imgFile.getInputStream(), new File(saveUrl+"\\"+newFileName));// 生成文件
	            System.out.println(saveUrl+"\\"+newFileName);
	            map.put("url","\\upload\\"+newFileName);
	            map.put("error", "0");
	            return map;
	        } catch (Exception e) {
	            return returnErrorMap("图片上传失败");
	        }
	    }

	    /**
	     * 
	     * @param response
	     * @param request
	     * @param imgFiles
	     *            多文件
	     * @return
	     */
	     @RequestMapping("/upload")
	      @ResponseBody
	     public  String uploadImgs(HttpServletResponse response, HttpServletRequest request,
	            @RequestParam("imgFiles") MultipartFile[] imgFiles) {
	        response.setContentType("text/plain;charset=UTF-8");
	        String url = "";
	       Map<String,Object> obj = new HashMap<String,Object>();
	        try {
	            for (MultipartFile myFile : imgFiles) {
	                Map imgPath = uploadImg(response, request, myFile);// 上传方法
	                if (imgPath.get("error").equals("0")) {
	                    url += imgPath.get("url");
	                }
	            }
	            obj.put("error", 0);// 上传成功
	            if (url.length() > 0) {
	            	obj.put("url", url);
	            } 
	        } catch (Exception e) {
	            e.printStackTrace();
	            obj.put("error", 1);// 上传失败
	            obj.put("url", url);
	        }
	        //map转json
	        JSONObject jsonObject = new JSONObject(obj);
	        String result = jsonObject.toString();
	        return result;
	    }

	    /**
	     * 错误提示
	     * 
	     * @param message
	     * @return
	     */
	    private Map<String, Object> returnErrorMap(String message) {
	        Map<String, Object> map = new HashMap<String, Object>();
	        map.put("error", 1);
	        map.put("message", message);
	        return map;
	    }	 

五、效果图

 

六、插入到编辑框中图片大小如何自适应框呢？打开kindeditor-all.js找到insertimage修改即可：

insertimage : function(url, title, width, height, border, align) {
		title = _undef(title, '');
		border = _undef(border, 0);
		var html = '<img src="' + _escape(url) + '" data-ke-src="' + _escape(url) + '" ';
		/*if (width) {
			html += 'width="' + _escape(width) + '" ';
		}*/
		html += 'width="100%"';
		if (height) {
			html += 'height="' + _escape(height) + '" ';
		}
		if (title) {
			html += 'title="' + _escape(title) + '" ';
		}
		if (align) {
			html += 'align="' + _escape(align) + '" ';
		}
		html += 'alt="' + _escape(title) + '" ';
		html += '/>';
		return this.inserthtml(html);
	},