kendo ui 富文本编辑控件 Editor 实现本地上传图片，并显示

富文本编辑的组件有很多，大名鼎鼎的KENDO UI中自然也有，但是默认功能中，只能包含网络图片，

而如果要实现本地上传图片，KENDO UI也提供了相应的功能，但必须实现KENDO规定的多个接口，

而且功能过于丰富，有时项目并用不到，所以我想利用自定义按钮来实现，下面就是实现过程：

1、先在JSP中定义textarea标签，作为富文本编辑框的占位。

 <div class="form-group">
                     <label class="col-xs-2 control-label">项目简述：</label>
                     <div class="col-xs-8">
                         <textarea id="project-desc" type="text" class="form-control" maxlength="10000"></textarea>
                     </div>
                 </div>

2、在JS脚本中定义其为KendoEditor,并设置其默认按钮，及自定义按钮。

     $("#project-desc").kendoEditor({
           tools: [
                       "formatting",
                       "bold", "italic", "underline",
                       "justifyLeft", "justifyCenter", "justifyRight",
                       "insertUnorderedList", "insertOrderedList", "indent",
                       "createTable",
                       {
                           name: "image",
                           tooltip: "Insert image",
                           template: "<button type='button' class='k-button' onclick='uploadimg();'><span class='glyphicon glyphicon-picture' aria-hidden='true'></button>",
                       }
                  ],

                 keydown: function(e) {
                     $(".k-editable-area").tooltip('destroy');
                 }
     });

name为标签的名字，tooltip为悬停的提示，template为按钮的样式。

3、uploadimg()方法是打开文件上传选择窗口，这里我使用的是kendoWindow。

JSP代码：

  <div id="upload-img-win">
      <div class="container-fluid">
            <form id="editorUploadImg" action="${ctx }/Detail/uploadImg"  enctype='multipart/form-data'>
                <input id="srcEditor" type="hidden"/>
                <div class="form-group  ld-bottom" id="ImgUploadGroup">
                    <label class="col-xs-2 control-label">图片上传：</label>
                    <div class="col-xs-8">
                        <button id="uploadImg-btn" type="button" class="btn btn-primary" onclick="openImgSelectFile();">选择文件</button>
                        <label id="uploadImgFileName" class="control-label"></label>
                        <input id="uploadImg" name="uploadImg" type="file" class="hidden" onchange="seletedImgFile();"/>
                    </div>
                </div>
                <div class="row ld-top ld-bottom">
                    <div class="col-xs-10">
                        <div class="pull-right">
                            <button id="doc-save-btn" type="button" class="btn btn-primary" onclick="uploadImgWinObj.save()">保存</button>
                            <button id="doc-cancel-btn" type="button" class="btn btn-default" onclick="uploadImgWinObj.close()">关闭</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
 </div>

js代码：

 var uploadImgWinObj = null;
 //上传图片窗口
 function uploadImgWin() {
     var me = this;

     this.winEl = $("#upload-img-win");
     this.winEl.kendoWindow({
         draggable   : true,
         width       : "650px",
         modal       : true,
         pinned      : false,
         title       : "选择图片",
         visible     : false,
         animation   : false,
         resizable   : false,
         actions     : ["Close"]
     });

     this.kObj = this.winEl.data("kendoWindow")

     this.open = function(srcEditor) {
         clearInput("#upload-img-win");
         $("#uploadImgFileName").html("");
         $("#uploadImg").val("");
         $("#srcEditor").val(srcEditor);
         this.kObj.center();
         this.kObj.open();
     }

     this.close = function() {
         this.kObj.close();
     }

     this.save = uploadImg;
 }

 //上传图片
 function uploadImg(){
     if($("#uploadImg").val()==""){
         markError("#uploadImg","没有选择任何文件！","#editorUploadImg")
         return;
     }

      $("#editorUploadImg").ajaxSubmit({
          type: "post",
          success: function (data) {
              if(data!="-99"){
 //                 bootbox.alert("操作成功！");
                  var srcEditor = $("#srcEditor").val();
                  var editor = $(srcEditor).data("kendoEditor");
                  editor.exec("insertHTML", { value: "<img src='"+ ctx + "/" + data +"' >"});
                  uploadImgWinObj.close();
              }else{
                  uploadImgWinObj.close();
                   bootbox.alert("操作失败！");
              }
          },
          error: function(e){
              bootbox.alert("操作失败！");
              uploadImgWinObj.close();
          }
      });
 }

 //选择图片
 function openImgSelectFile(){
     $("#uploadImg").click();
 }

 //选中图片后，显示图片名称
 function seletedImgFile(){
     $("#uploadImgFileName").html($("#uploadImg").val());
 }

 function uploadimg(){
     uploadImgWinObj.open("#project-desc");
 }

 $(document).ready(function() {
     uploadImgWinObj = new uploadImgWin();
 }
   

openImgSelectFile和seletedImgFile是对文件选择控件的包装，为了显示效果好看些。

uploadImg方法采用了ajaxSubmit方式进行提交，这里需要引用jquery.form.js插件，

该插件可以使用AJAX异步方式上传文件，http://plugins.jquery.com/form/ 这里可以下载。

4、最后在Controller里实现保存上传图片功能。

 /**
      * 上传图片
      */
     @RequestMapping(value="/uploadImg")
     @ResponseBody
     public String uploadImg(HttpSession session,HttpServletRequest request,HttpServletResponse response,
             @RequestParam(value = "uploadImg", required = false) MultipartFile file) {
         try {

             User loginUser = (User) session.getAttribute("loginUser");

             // 获得上传文件的格式
             String fileName = "";
             String path = "";
             String url = "";
             //无文件则不做文档保存动作
             if(file!=null && !"".equals(file.getOriginalFilename()))  {
                 fileName = file.getOriginalFilename();
                 String format = fileName.substring(fileName.lastIndexOf("."));

                 path = request.getSession().getServletContext().getRealPath("");

                 //使用UUID命名，防止文件重名
                 UUID uuid = UUID.randomUUID();
                 String newFileName = uuid.toString()+format;
                 url = "resources/upload/"+loginUser.getUserId()+"/img/"+ newFileName;// 文件名

                 path = path + File.separator + "resources" + File.separator + "upload"+ File.separator+loginUser.getUserId()+ File.separator + "img";
                 File diagramDirFile = new File(path);
                 if (!diagramDirFile.exists()) {
                     //如果文件夹不存在，则创建它
                     diagramDirFile.mkdirs();
                 }
                 path = path + File.separator + newFileName;
                 //保存上传文件
                 FileCopyUtils.copy(file.getBytes(), new FileOutputStream(path));

             }        

             return url;

         } catch (IOException e) {
             // TODO Auto-generated catch block
             e.printStackTrace();
             return "-99";
         }

     }

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