使用summernote編輯器上傳圖片，重寫onImageUpload

JS部分：
$('.summernote').summernote({
    height: 200,//高度
    tabsize: 2,//頁面上的summernote編輯框的個數
    lang: 'zh-CN',//語言
    callbacks:{//回調函數，重寫onImageUpload方法
        onImageUpload: function(files, editor, welEditable) {
            sendFile(this,files[0],editor,welEditable);
        }
    }
});

function sendFile(val,files,editor,welEditable) {
    data = new FormData();
    data.append("files", files);
    $.ajax({
        data: data,
        dataType: 'json',
        type: "POST",
        url: "后台url",
        cache: false,
        contentType: false,
        processData: false,
        responseType: "json",
        success: function(data) {
            $(val).summernote('editor.insertImage', data.path);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.status);
            alert(XMLHttpRequest.readyState);
            alert(textStatus);
        }
    });
}

springmvc后台：

@RequestMapping(value = "ajaxUploadFile",produces="application/json;charset=UTF-8")
@ResponseBody
public void ajaxUploadFile(@RequestParam("files") CommonsMultipartFile myfiles, HttpServletRequest request,HttpServletResponse response) {

    int size = 0;
    String fileLogicName = "";
    PageData pageData = new PageData();
    UUID uuid = UUID.randomUUID();
    String[] fileNames = myfiles.getOriginalFilename().split("\\.");
    String suffix = fileNames[1];
    String fileName = uuid.toString().replace("-", "");  // 文件重命名
    if (fileNames.length >= 2) {
        fileName += "." + fileNames[1];
    }

    String relPath = FilePathUtil.getUploadTempPath(request) + fileName;
    String filePath = FilePathUtil.getFileRootPath(request) + relPath;// 文件保存的實際路徑
    File localFile = new File(filePath);
    if (!localFile.getParentFile().exists()) {
        localFile.getParentFile().mkdirs();
    }

    try {
        size = myfiles.getBytes().length;
        fileLogicName = myfiles.getOriginalFilename();
        myfiles.transferTo(localFile); // 保存文件
    } catch (IOException e) {
        pageData.setResult(2);
        pageData.setDesc("上傳文件失敗");
        logger.error("上傳文件失敗", e);
    }
    relPath = relPath.replace("\\", "/").replace("//", "/");

    pageData.setResult(1);
    pageData.setDesc("文件添加成功！");
    relPath = relPath.replace("\\", "/").replace("//", "/");
    FileInfo fileInfo = new FileInfo();
    fileInfo.setFileSize(size);
    fileInfo.setFileName(fileName);
    fileInfo.setFilePath(relPath);
    fileInfo.setSuffix(suffix);
    fileInfo.setFullFileUrl(relPath);
    fileInfo.setFileLogicName(fileLogicName);
    StringBuffer stringBuffer = new StringBuffer();
    stringBuffer.append("{");
    stringBuffer.append("\"result\"" + ":" + "\"" + pageData.getResult() + "\",");
    stringBuffer.append("\"desc\"" + ":" + "\"" + pageData.getDesc() + "\",");
    stringBuffer.append("\"fileSize\"" + ":" + "\"" + fileInfo.getFileSize() + "\",");
    stringBuffer.append("\"fileName\"" + ":" + "\"" + fileInfo.getFileName() + "\",");
    stringBuffer.append("\"filePath\"" + ":" + "\"" + fileInfo.getFilePath() + "\",");
    stringBuffer.append("\"suffix\"" + ":" + "\"" + fileInfo.getSuffix() + "\",");
    stringBuffer.append("\"fullFileUrl\"" + ":" + "\"" + fileInfo.getFullFileUrl() + "\",");
    stringBuffer.append("\"fileLogicName\"" + ":" + "\"" + fileInfo.getFileLogicName() + "\"");
    stringBuffer.append("}");
    try {
        //response.setContentType("text/javascript");
        response.setContentType("text/html; charset=utf-8");
        response.getWriter().print(stringBuffer.toString());
    } catch (IOException e) {

    }
}

FileInfo實體類

package com.cec.test;
public class FileInfo {

    private Integer  fileSize;

    private String fileName;

    private String filePath;

    private String suffix;

    private String  fullFileUrl;

    private String  fileLogicName;


    public Integer getFileSize() {
        return fileSize;
    }

    public void setFileSize(Integer fileSize) {
        this.fileSize = fileSize;
    }

    public String getFileName() {
        return fileName;
    }

    public void setFileName(String fileName) {
        this.fileName = fileName;
    }

    public String getFilePath() {
        return filePath;
    }

    public void setFilePath(String filePath) {
        this.filePath = filePath;
    }

    public String getSuffix() {
        return suffix;
    }

    public void setSuffix(String suffix) {
        this.suffix = suffix;
    }

    public String getFullFileUrl() {
        return fullFileUrl;
    }

    public void setFullFileUrl(String fullFileUrl) {
        this.fullFileUrl = fullFileUrl;
    }

    public String getFileLogicName() {
        return fileLogicName;
    }

    public void setFileLogicName(String fileLogicName) {
        this.fileLogicName = fileLogicName;
    }
}

FilePathUtil工具類

public static String  getUploadTempPath(HttpServletRequest request){

    String currentDateStr = DateUtil.sdfDays.format(new Date());
    StringBuffer downloadPath = new StringBuffer();
    downloadPath.append( File.separator).append(FILE_UPLOAD_TEMP_PATH)
            .append(File.separator).append(currentDateStr)
            .append(File.separator);
    // 解決掉前台jsp展示的時候出現 轉義字符問題
    String  filepath = downloadPath.toString().replace("\\", "/").replace("//","/");

    return  filepath;
}

public static String getRelPath(HttpServletRequest request, String path){
    String filepath = new  StringBuffer (getFileRootPath(request)).append(path).toString();
    filepath = filepath.toString().replace("\\", "/").replace("//","/");
    File dir = new File(filepath);
    if (!dir.exists()) {
        boolean makeSucess = dir.mkdirs();
        if(!makeSucess){
            logger.error("創建文件目錄失敗：" +  filepath);
        }
    }
    return filepath;
}

//PageDate類 
//用於后台向前台響應ajax請求返回的對象

@Component
public class PageData {
    private int result;
    private Map<Object,Object>  resultMap;
    private String desc;

    public int getResult() {
        return result;
    }

    public void setResult(int result) {
        this.result = result;
    }

    public Map<Object,Object> getResultMap() {

        //統一分配資源
        if(resultMap == null){
            resultMap = new HashMap<Object,Object>();
        }

        return resultMap;
    }

    public void setResultMap(Map resultMap) {
        this.resultMap = resultMap;
    }

    public String getDesc() {
        return desc;
    }

    public void setDesc(String desc) {
        this.desc = desc;
    }
}
展示：

 

//UUID類可上網百度獲得，工作之后初次使用summernote的使用經驗。

場景：公司項目是一個頁面上有兩個富文本編輯框，和一個保存按鈕
解決思路：在用戶點擊圖片按鈕，上傳圖片的時候，調用回調函數，將圖片通過FormData對象傳到后台，后台將圖片暫時保存到臨時圖片文件夾，返回臨時圖片地址。
前台接收到圖片地址之后，將圖片插入到富文本編輯框內。當用戶點擊保存時，將臨時文件夾中的圖片保存到真實圖片保存目錄下（這樣做的目的是為了解決維護人員不會把臨時文件刪除掉，看個人需求）。
通過summernote('code')獲取文本框內的內容，通過ajax傳到后台，后台接收到參數之后，使用正則表達式替換掉臨時文件夾的目錄，最終返回真實圖片保存目錄，將真實圖片保存目錄保存到數據庫。

//備注：解決思路中的保存步驟代碼在此處沒有展示。

總結：思路很重要，先理清思路，再動手不遲！