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中插入該地址即可展示圖片