天天看點
傳回

bootstrap summernote富文本編輯器圖檔上傳幹貨分享

個人技術網站 歡迎關注

今天做背景的時候需要一個富文本編輯器元件,由于項目使用的是bootstrap,是以毫不猶豫的用上了summernote富文本編輯器。文檔各大大牛已經整理出來了  但是圖檔上傳到伺服器這塊比較雜  大部分都是說上傳到伺服器的圖檔格式是base64的，但是我使用base64接收的時候看了下控制台竟然是二進制上傳 、、、lol  上傳方法白寫了,至此在這裡做個記錄  友善自己謹記和有需要的人使用

第一步  加載富文本編輯器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>編輯器</title>
<link href="/css/bootstrap.min.css?v=3.3.6" target="_blank" rel="external nofollow"  th:href="@{/css/bootstrap.min.css?v=3.3.6}" target="_blank" rel="external nofollow"  rel="stylesheet">
<link href="/summernote/summernote.css" target="_blank" rel="external nofollow"  rel="stylesheet" th:href="@{/summernote/summernote.css}" target="_blank" rel="external nofollow" />
<script src="/js/jquery.min.js?v=2.1.4" th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
<script src="/js/bootstrap.min.js?v=3.3.6" th:src="@{/js/bootstrap.min.js?v=3.3.6}"></script>
<script src="/summernote/summernote.js" th:src="@{/summernote/summernote.js}"></script>
<script src="/summernote/lang/summernote-zh-CN.js" th:src="@{/summernote/lang/summernote-zh-CN.js}"></script>    <!-- 中文-->
<style>
   .m{ width: 500px; margin-left: auto; margin-right: auto; }
</style>
<script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
        var ctxPath = /*[[@{/}]]*/ '';
        /*]]>*/
        console.info(ctxPath);
</script>
<script>
$(document).ready(function() {
    $('.summernote').summernote({  
        height: 500,
        tabsize: 2,
        lang: 'zh-CN',
        callbacks: {  
            onImageUpload: function(files) { //the onImageUpload API  
               console.log("圖檔上傳"+files[0]);
                img = sendFile(files[0]);  
        }  
    }  
    });  
});
function sendFile(file) {  
    data = new FormData();  
    data.append("file", file);
    $.ajax({  
        data: data,  
        type: "POST",  
        url: ctxPath+"/common/sysFile/upload",
        cache: false,  
        contentType: false,  
        processData: false,  
        success: function(data) {
            console.log(data);
            $(".summernote").summernote('insertImage', ctxPath+data.fileName, 'image name'); // the insertImage API
        }  
    });  
}  
</script>
</head>

<body>
   <div class="m">       
      <div class="summernote">summernote 1</div>
   </div>
</body>
</html>

這一步網上的文檔很詳細  一些路徑請自己根據項目需要配置

2 服務端上傳接口

@ResponseBody
@PostMapping("/upload")
R upload(@RequestParam("file") MultipartFile[] file, @RequestParam(value = "type", defaultValue = "0") String type, HttpServletRequest request) throws IOException {
    if ("test".equals(getUsername())) {
        return R.error(1, "示範系統不允許修改,完整體驗請部署程式");
    }
    type = type==null||type==""?type="2":type;
    LOGGER.info(">>>>>>>>>>>>>>>>>>>>> {}", type);
    Date createTime = new Date();
    if (null != file && file.length > 0) {
        //周遊并儲存檔案
        for (MultipartFile files : file) {
            if (file != null) {
                //取得目前上傳檔案的檔案名稱
                String fileName = files.getOriginalFilename();
                //如果名稱不為“”,說明該檔案存在，否則說明該檔案不存在
                if (type.equals("1")) {//OSS方式上傳檔案
                    String suffix = files.getOriginalFilename().substring(files.getOriginalFilename().lastIndexOf("."));
                    String url = ossService.build().uploadSuffix(files.getBytes(), suffix);
                    //儲存檔案資訊
                    fileName = FileUtil.renameToUUID(fileName);
                    SysFile sysFile = new SysFile(FileType.fileType(fileName), url, new Date(), getUserId());
                    if (sysFileService.save(sysFile) > 0) {
                        LOGGER.info(">>>>>>>>>>>>>OSS上傳圖檔路徑  {}", url);
                        return R.ok().put("fileName", sysFile.getUrl());
                    }
                } else {//本地上傳圖檔方式
                    fileName = FileUtil.renameToUUID(fileName);
                    SysFile sysFile = new SysFile(FileType.fileType(fileName), "/files/" + fileName, new Date(), getUserId());
                    try {
                        FileUtil.uploadFile(files.getBytes(), bootdoConfig.getUploadPath(), fileName);
                    } catch (Exception e) {
                        return R.error();
                    }
                    if (sysFileService.save(sysFile) > 0) {
                        LOGGER.info(">>>>>>>>>>>>>本地上傳圖檔路徑  {}", "/files/" + fileName);
                        return R.ok().put("fileName", sysFile.getUrl());
                    }
                }
            }
        }
    } else {
        return R.error("上傳檔案不能為空");
    }
    return R.ok();
}

這一步就是個簡單的二進制上傳接口 有需要的根據自己項目需要更改 

最後來一張debug效果圖

bootstrap summernote富文本編輯器圖檔上傳幹貨分享
springboot bootstrap summernote summernote 富文本編輯器 圖檔上傳
上一篇: Java享元實作定制版的Map
下一篇: UEditor--富文本編輯器

繼續閱讀