SpringBoot2整合富文本编辑器wangEditor(含文件上传)攻略

背景

最近要用到一个富文本编辑器，记得遥远的年代，调过Kingeditor、Ueditor。。。但是那些都很重，，，于是最近经常再留意这件事，直到最近看到一个wangEditor，体验了一下，又轻又好用，功能也相对丰富够用。

官网地址 http://www.wangeditor.com/

使用手册 https://www.kancloud.cn/wangfupeng/wangeditor3/332599

wangEditor有对应的CDN，本地无需放置，直接引用就可以了。

http://cdn.staticfile.org/wangEditor/10.0.13/fonts/w-e-icon.woff http://cdn.staticfile.org/wangEditor/10.0.13/wangEditor.css http://cdn.staticfile.org/wangEditor/10.0.13/wangEditor.js http://cdn.staticfile.org/wangEditor/10.0.13/wangEditor.min.css http://cdn.staticfile.org/wangEditor/10.0.13/wangEditor.min.js http://cdn.staticfile.org/wangEditor/10.0.13/wangEditor.min.js.map

html页面

最简单的讲，只需要三行js代码，可以看下下面具体的demo，直接可以运行的。

var E = window.wangEditor
var editor2 = new E(’#div3’)
editor2.create()

    
    
    























 



















    

        

            SpringBootCodeGenerator
            

                

                    大狼狗CSDN
                
            
        
    


    
    

        

            
Spring Boot Code Generator!
            基于SpringBoot2+Freemarker的代码生成器，用DDL SQL语句生成JPA/JdbcTemplate/Mybatis/BeetlSQL相关代码，支持mysql/oracle/pgsql三大数据库。以释放双手为目的，各大模板也在陆续补充和优化。欢迎大家多多提交模板和交流想法，如果发现有SQL语句不能识别，请留言给我分析，谢谢！
            

            

                

                    标题名称
                
                
                

                    文章类型
                
                
            
            

            

                
欢迎使用富文本编辑器
            
            
保存 »
        
    

    

springboot的controller

核心上传代码其实应该差不多，大家可以根据自己的业务逻辑来生成或者做一些处理。

@RestController
@RequestMapping("/upload")
public class UploadController {
	//这个注入配置文件，主要是因为本地的路径和服务器url路径需要动态配置，可以自己写死，也可以动态获取
    @Autowired
    AppConfig appConfig;
    
    @RequestMapping("/editor")
    @ResponseBody
    public Object editor(@RequestParam("file") MultipartFile file) {
        String fileName ="";
        if(!file.isEmpty()){
            //返回的是字节长度,1M=1024k=1048576字节 也就是if(fileSize<5*1048576)
            if(file.getSize()>(1048576*5)){return ApiReturnUtil.error("文件太大，请上传小于5MB的");}
            String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
            if(StringUtils.isBlank(suffix)){return ApiReturnUtil.error("上传文件没有后缀，无法识别");}

            fileName = System.currentTimeMillis()+suffix;
            String saveFileName = appConfig.getFilepath()+"/article/"+fileName;
            System.out.println(saveFileName);
            File dest = new File(saveFileName);
            System.out.println(dest.getParentFile().getPath());
            if(!dest.getParentFile().exists()){ //判断文件父目录是否存在
                dest.getParentFile().mkdir();
            }
            try {
                file.transferTo(dest); //保存文件
            } catch (Exception e) {
                e.printStackTrace();
                return new WangEditorResponse("1","上传失败"+e.getMessage());
                //return ApiReturnUtil.error("上传失败"+e.getMessage());
            }
        }else {
            return new WangEditorResponse("1","上传出错");
        }
        String imgUrl=appConfig.getUrlpath()+"article/"+fileName;
        return new WangEditorResponse("0",imgUrl );
    }
    @Data
    private class WangEditorResponse{
        String errno;
        List data;
        public WangEditorResponse(String errno,List data){
            this.errno=errno;
            this.data=data;
        }
        public WangEditorResponse(String errno,String data){
            this.errno=errno;
            this.data=new ArrayList<>();
            this.data.add(data);
        }
    }
 }

自动注入动态配置文件

@Component
@Data
@ConfigurationProperties(prefix = "system") // 接收application.yml中的myProps下面的属性
public class AppConfig {
    public String filepath;
    public String urlpath;
}

会自动读取以下application.yml中的变量

system:
  filepath: /vdb1/xxx/vue/resources
  #windows下用这个filepath: D:\temp\upload
  urlpath: http://www.xxxx.cn/resources/

上传返回格式

其中/http://localhost:8888/xxxx/upload/editor是上传图片的服务器端接口，接口返回的数据格式如下（实际返回数据时，不要加任何注释！！！）

    {
        // errno 即错误代码，0 表示没有错误。
        //       如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
        "errno": 0,
    
        // data 是一个数组，返回若干图片的线上地址
        "data": [
            "图片1地址",
            "图片2地址",
            "……"
        ]
    }

限制图片大小

默认限制图片大小是 5M

// 将图片大小限制为 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024

更多详情可以到官方文档去看https://www.kancloud.cn/wangfupeng/wangeditor3/335782