Kind Editor 编辑器 图片上传

KindEditor 编辑器 图片上传

最近接触到了html文本的存储。 以前没有涉及这么全面的html + 图片 上传。

今天用KindEditor 做了一些功能。 我的项目用spring mvc+mybatis 整的。

贴出我的前端和后端代码 。供新手参考。 不用多余jar。 跟普通上传图片差不多。

前端js代码

1. var editor;  
2.         KindEditor.ready(function(K) {  
3.             var editor = K.create('textarea[name="Description"]', {  
4.                 uploadJson : 'kingedit/imageUpload',上传图片的地址  
5.             });  
6.               
7.               
8.         });  

前端html代码

1. <textarea rows="5" cols="70" name="Description"></textarea>  
2.                   

后端上传图片代码，注意，编辑器必须接收到返回的json。

1. @RequestMapping("/imageUpload")  
2.     @ResponseBody  
3.     public String imageUpload(MultipartHttpServletRequest request) throws Exception {  
4.         String webpath =  null;  
5.         try {  
6.             //上传图片  
7.             MultipartFile file = request.getFile("imgFile");  
8.             webpath = FileUtil.saveWebImgFile(file);  
9.             if(StringUtils.isNotEmpty(webpath)){  
10.                 String path = request.getContextPath();  
11.                 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
12.                 webpath = "{\"error\" : 0,\"url\" : \""+basePath+webpath+"\"}";//成功  
13.             }else{  
14.                 webpath = "{\"error\" : 0,\"message\" : \"上传文件不存在\"}";//失败  
15.             }  
16.         }catch (Exception e) {  
17.             e.printStackTrace();  
18.         }  
19.         return webpath;  
20.     }