你的位置:首页 > Java教程

[Java教程]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>

View Code

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   });

View Code

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>

View Code

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  

View Code

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 block44       e.printStackTrace();45       return "-99";46     }47     48     49   }

View Code

服务器回传上传图片的URL,在Editor中插入该地址即可展示图片