kendo ui 富文本编辑控件 Editor 实现本地上传图片，并显示
富文本编辑的组件有很多，大名鼎鼎的KENDO UI中自然也有，但是默认功能中，只能包含网络图片，
而如果要实现本地上传图片，KENDO UI也提供了相应的功能，但必须实现KENDO规定的多个接口，
而且功能过于丰富，有时项目并用不到，所以我想利用自定义按钮来实现，下面就是实现过程：
1、先在JSP中定义textarea标签，作为富文本编辑框的占位。
1 <div class="form-group"> 2 <label class="col-xs-2 control-label">项目简述：</label> 3 <div class="col-xs-8"> 4 <textarea id="project-desc" type="text" class="form-control" maxlength="10000"></textarea> 5 </div> 6 </div>
2、在JS脚本中定义其为KendoEditor,并设置其默认按钮，及自定义按钮。
1 $("#project-desc").kendoEditor({ 2 tools: [ 3 "formatting", 4 "bold", "italic", "underline", 5 "justifyLeft", "justifyCenter", "justifyRight", 6 "insertUnorderedList", "insertOrderedList", "indent", 7 "createTable", 8 { 9 name: "image", 10 tooltip: "Insert image", 11 template: "<button type='button' class='k-button' onclick='uploadimg();'><span class='glyphicon glyphicon-picture' aria-hidden='true'></button>", 12 } 13 ], 14 15 keydown: function(e) { 16 $(".k-editable-area").tooltip('destroy'); 17 } 18 });
name为标签的名字，tooltip为悬停的提示，template为按钮的样式。
3、uploadimg()方法是打开文件上传选择窗口，这里我使用的是kendoWindow。
JSP代码：
1 <div id="upload-img-win"> 2 <div class="container-fluid"> 3 <form id="editorUploadImg" action="${ctx }/Detail/uploadImg" enctype='multipart/form-data'> 4 <input id="srcEditor" type="hidden"/> 5 <div class="form-group ld-bottom" id="ImgUploadGroup"> 6 <label class="col-xs-2 control-label">图片上传：</label> 7 <div class="col-xs-8"> 8 <button id="uploadImg-btn" type="button" class="btn btn-primary" onclick="openImgSelectFile();">选择文件</button> 9 <label id="uploadImgFileName" class="control-label"></label> 10 <input id="uploadImg" name="uploadImg" type="file" class="hidden" onchange="seletedImgFile();"/> 11 </div> 12 </div> 13 <div class="row ld-top ld-bottom"> 14 <div class="col-xs-10"> 15 <div class="pull-right"> 16 <button id="doc-save-btn" type="button" class="btn btn-primary" onclick="uploadImgWinObj.save()">保存</button> 17 <button id="doc-cancel-btn" type="button" class="btn btn-default" onclick="uploadImgWinObj.close()">关闭</button> 18 </div> 19 </div> 20 </div> 21 </form> 22 </div> 23 </div>
js代码：
1 var uploadImgWinObj = null; 2 //上传图片窗口 3 function uploadImgWin() { 4 var me = this; 5 6 this.winEl = $("#upload-img-win"); 7 this.winEl.kendoWindow({ 8 draggable : true, 9 width : "650px", 10 modal : true, 11 pinned : false, 12 title : "选择图片", 13 visible : false, 14 animation : false, 15 resizable : false, 16 actions : ["Close"] 17 }); 18 19 this.kObj = this.winEl.data("kendoWindow") 20 21 this.open = function(srcEditor) { 22 clearInput("#upload-img-win"); 23 $("#uploadImgFileName").html(""); 24 $("#uploadImg").val(""); 25 $("#srcEditor").val(srcEditor); 26 this.kObj.center(); 27 this.kObj.open(); 28 } 29 30 this.close = function() { 31 this.kObj.close(); 32 } 33 34 this.save = uploadImg; 35 } 36 37 //上传图片 38 function uploadImg(){ 39 if($("#uploadImg").val()==""){ 40 markError("#uploadImg","没有选择任何文件！","#editorUploadImg") 41 return; 42 } 43 44 $("#editorUploadImg").ajaxSubmit({ 45 type: "post", 46 success: function (data) { 47 if(data!="-99"){ 48 // bootbox.alert("操作成功！"); 49 var srcEditor = $("#srcEditor").val(); 50 var editor = $(srcEditor).data("kendoEditor"); 51 editor.exec("insertHTML", { value: "<img src='"+ ctx + "/" + data +"' >"}); 52 uploadImgWinObj.close(); 53 }else{ 54 uploadImgWinObj.close(); 55 bootbox.alert("操作失败！"); 56 } 57 }, 58 error: function(e){ 59 bootbox.alert("操作失败！"); 60 uploadImgWinObj.close(); 61 } 62 }); 63 } 64 65 //选择图片 66 function openImgSelectFile(){ 67 $("#uploadImg").click(); 68 } 69 70 //选中图片后，显示图片名称 71 function seletedImgFile(){ 72 $("#uploadImgFileName").html($("#uploadImg").val()); 73 } 74 75 function uploadimg(){ 76 uploadImgWinObj.open("#project-desc"); 77 } 78 79 $(document).ready(function() { 80 uploadImgWinObj = new uploadImgWin(); 81 } 82
openImgSelectFile和seletedImgFile是对文件选择控件的包装，为了显示效果好看些。
uploadImg方法采用了ajaxSubmit方式进行提交，这里需要引用jquery.form.js插件，
该插件可以使用AJAX异步方式上传文件，http://plugins.jquery.com/form/ 这里可以下载。
4、最后在Controller里实现保存上传图片功能。
1 /** 2 * 上传图片 3 */ 4 @RequestMapping(value="/uploadImg") 5 @ResponseBody 6 public String uploadImg(HttpSession session,HttpServletRequest request,HttpServletResponse response, 7 @RequestParam(value = "uploadImg", required = false) MultipartFile file) { 8 try { 9 10 User loginUser = (User) session.getAttribute("loginUser"); 11 12 // 获得上传文件的格式 13 String fileName = ""; 14 String path = ""; 15 String url = ""; 16 //无文件则不做文档保存动作 17 if(file!=null && !"".equals(file.getOriginalFilename())) { 18 fileName = file.getOriginalFilename(); 19 String format = fileName.substring(fileName.lastIndexOf(".")); 20 21 path = request.getSession().getServletContext().getRealPath(""); 22 23 //使用UUID命名，防止文件重名 24 UUID uuid = UUID.randomUUID(); 25 String newFileName = uuid.toString()+format; 26 url = "resources/upload/"+loginUser.getUserId()+"/img/"+ newFileName;// 文件名 27 28 path = path + File.separator + "resources" + File.separator + "upload"+ File.separator+loginUser.getUserId()+ File.separator + "img"; 29 File diagramDirFile = new File(path); 30 if (!diagramDirFile.exists()) { 31 //如果文件夹不存在，则创建它 32 diagramDirFile.mkdirs(); 33 } 34 path = path + File.separator + newFileName; 35 //保存上传文件 36 FileCopyUtils.copy(file.getBytes(), new FileOutputStream(path)); 37 38 } 39 40 return url; 41 42 } catch (IOException e) { 43 // TODO Auto-generated catch block 44 e.printStackTrace(); 45 return "-99"; 46 } 47 48 49 }
服务器回传上传图片的URL，在Editor中插入该地址即可展示图片
