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中上传本地图片成功后获取到的图片路径是相对路径修改为绝对路径
我们可以点击查看解决。

这辈子坚持与不坚持都不可怕,怕的是独自走在坚持的道路上！！！
欢迎加入技术群聊！！