springboot前端thymeleaf整合KindEditor富文本及上传文件大小配置

KindEditor的使用

KindEditor下载

下载路径

下载路径：http://kindeditor.net/down.php点击进入下载

解压目录

只需在项目引入如下几个文件便可：

放入项目在需要的页面引入

KindEditor配置

html页面使用

 <textarea id="info"   name="info" "></textarea>

script配置

<script>
    var editor1;
    KindEditor.ready(function(K) {
        editor1 = K.create('textarea[name="info"]',{
                //参数配置
                width : '95%',
                filePostName: "imgFile",
                uploadJson: '/fileUpload',  //文件上传路径
                minHeight: '600',
                resizeType : 0,//0禁止拉伸，1可以上下拉伸，2上下左右拉伸
                filterMode: false,//true时过滤HTML代码，false时允许输入任何代码。
                allowFileManager : true,
                allowImageUpload:true,//允许上传图片 打开本地上传图片功能
                itmes:  [
                    'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
                    'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
                    'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
                    'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
                    'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
                    'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
                    'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'pagebreak',
                    'anchor', 'link', 'unlink', '|', 'about'
                ],
            allowImageRemote: false,
            afterBlur: function(){this.sync();},//编辑器失去焦点(blur)时执行的回调函数。
            /* 上传文件后执行的回调函数。*/
            afterUpload : function(url, data, name) { //上传文件后执行的回调函数，必须为3个参数
                if (name == "image" || name == "multiimage") { //单个和批量上传图片时
                    var img = new Image();
                    img.src = url;
                    img.onload = function () { //图片必须加载完成才能获取尺寸
                    }
                }
            },}
        );
        //  prettyPrint();
       // editor1.html("hhhhhh")
    });

</script>

springboot后端接口

@RequestMapping("/fileUpload")
@ResponseBody
public Map  uploadFile(@RequestParam("imgFile") MultipartFile file) {
	//TODO文件上传
    Map map=new HashMap();
    return map;
}

KindEditor要求的文件上传 返回格式(JSON) 为：

//成功时
{
        "error" : 0,
        "url" : "http://www.example.com/path/to/file.ext"
}
//失败时
{
        "error" : 1,
        "message" : "错误信息"
}

上传图片报错：Spring Boot:The field file exceeds its maximum permitted size of 1048576 bytes.

springboot默认的最大为1MB,所以根据需求进行更改。

方法有二：
1.通过application配置文件进行更改
由于我用的是application.yml；所以我的格式为：

server:
  servlet:
    multipart:
      enabled: true #是否启用http上传处理
      max-request-size: 100MB #最大请求文件的大小
      max-file-size: 200MB #总的文件的大小

这个方式我用没起作用，我用第二种方式可以使用。

2.通过添加配置类进行配置，代码如下：

@Configuration
public class FileSizeConfig implements WebMvcConfigurer {

    @Bean
    public MultipartConfigElement multipartConfigElement() {
        MultipartConfigFactory factory = new MultipartConfigFactory();
        //单个文件最大  单位可以为KB 或 MB
        factory.setMaxFileSize(DataSize.parse("10MB"));
        /// 设置总上传数据总大小
        factory.setMaxRequestSize(DataSize.parse("100MB"));
        return factory.createMultipartConfig();
    }
}