springboot中kindeditor 上傳圖片及其富文本如何回顯及其他小問題第二版

這篇博客延續上一篇繼續往下講

function submitContent() {
        var photoBigtitle = $("#photoBigtitle").val();
        var editorContent = encodeURIComponent(editor.fullHtml());  //decodeURIComponent
        // var editorContent=editor.fullHtml();
        var photoSmalltitle = $("#photoSmalltitle").val();

        $.ajax({
             url: "/homepage/addSysHomePhoto",   //配置請求的路徑
             type: "get",//請求方式  默認get
             dataType:"json",
             data: {
                 "photoBigtitle": photoBigtitle,
                 "photoContent": editorContent,
                 "photoSmalltitle": photoSmalltitle,
                 "photoUrl":view,
                 "photoSaveurl":save
             },//傳送的數據
             success: function (data) {  //成功回調函數
                 console.log(data)
                 if (data.code == 60001) {
                     location.href = "/homepage/homePageList"
                 } else {
                     alert(data.message)
                 }
             }
         });
    }

因爲上一篇博客，我們已經在js中定義好了變量editor。
所以現在我們直接editor.fullHtml(); 說白了這麼一個方法就是獲取到富文本中的內容包含了圖片或者文字之類的，這個是kindeditor 插件中的api。
在使用encodeURIComponent(editor.fullHtml())這麼一個方法，
這個encodeURIComponent方法是js中的一個方法，意思是將富文本中的內容進行編碼。其實在js中也有decodeURIComponent方法對富文本中的內容進行解碼。不過今天我們要講的不是decodeURIComponent方法。而是如何在java代碼中進行解碼。
直接上代碼：

@RequestMapping("/detail")
    @ResponseBody
    @ApiOperation(value = "獲取首頁圖片信息", notes = "獲取首頁圖片信息", produces = "application/json")
    public ModelAndView detail(ModelAndView mv ,@ApiParam(value = "主鍵ID") @RequestParam Integer id) {
        SysHomePhoto dto = sysHomePhotoService.findOne(id);

        String content = dto.getPhotoContent();
        try {
            content = URLDecoder.decode(content, "utf-8");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        mv.addObject("SysHomePhoto",dto);
        mv.addObject("content",content);
        mv.setViewName("homephoto/homePageUpdate");
        return mv;
    }

URLDecoder這個方法就是獲取富文本的內容使用java的方式對其進行解碼返回給前端，其實和decodeURIComponent方法效果一樣。這樣經過解碼後，返回給了前端。前端就可以達到回顯的效果。

如何設置回顯的圖片的尺寸，我們也可以通過java代碼進行設置。

 @RequestMapping("/uploadTextNewsPhoto")
    @ResponseBody
    public Map uploadTextNewsPhoto(@RequestParam("imgFile") MultipartFile[] uploadFiles, HttpServletRequest request) {
        Map map = new HashMap<>();

        if (uploadFiles.length > 0) {
            
            map.put("error", 0);
            map.put("url", list.get(0));
            map.put("width","550px");
            map.put("height","550px");
            return map;
        } else if (uploadFiles.length == 0) {
            map.put("error", 1);
            map.put("message", "請選擇需要上傳的文件");
            return map;
        }
        map.put("error", 1);
        map.put("message", "上傳失敗");
        return map;
    }

我麼可以返回map的形式，key寫width , height。來對回顯的圖片進行設置寬高的尺寸。

還有一些小問題 ，比如
關於富文本kindeditor中上傳本地圖片成功後獲取到的圖片路徑是相對路徑修改爲絕對路徑
我們可以點擊查看解決。

這輩子堅持與不堅持都不可怕,怕的是獨自走在堅持的道路上！！！
歡迎加入技術羣聊！！