spring boot2.0整合富文本编辑器summernote

summernote对上传图片，以及对图片大小细节，删除图片移除服务器资源等处理的比较完美。

整合过程，summernote的官网https://summernote.org/getting-started/，官网的文档比较详细，基本都能看懂。

工具：spring boot2.1.0，前端bootstrap4.0。

一、下载源码（从官网下）

导入项目，在页面引用这几项，直接复制即可，也可引用本地库

二、初始化summernote

  
  
  
   
   
  
  


  
Hello Summernote
  

当然我们在这里可以初始化一些summernote的参数，比如

 $('#summernote').summernote({
        placeholder: '我是千古',
        tabsize: 2,
        height: 400,  //高度，根据需要去设
        lang: 'zh-CN',  //zh-CN为中文文件，如果需要转换语言，注意在下载的lang文件夹中取出并加载
        focus: true
      });

到这里页面就会显示

三、上传图片至服务器

我这里还是将图片上传至本地虚拟路径，在summernote的官网我们可以看到覆盖图片上传的方法

这里我们使用第一种，前端js代码，初始化文本，并且回调覆盖上传方法

后台方法

    @ResponseBody
	@RequestMapping("/img")
    public Map uploadImgQiniu(@RequestParam("files") MultipartFile     
        file) throws IOException {
    	Map map = new HashMap();
    	if(!file.isEmpty()) {
    		System.out.println(file.getOriginalFilename());
            String fileName = file.getOriginalFilename();
            // 获取后缀
            //String suffixName = fileName.substring(fileName.lastIndexOf("."));
            // 文件上传的路径
            String filePath = "C:/Users/ASUS/Desktop/file/";
            // fileName处理
            fileName = filePath+fileName;
            // 文件对象
            File dest = new File(fileName);
            // 创建路径
            if(!dest.getParentFile().exists()){
                dest.getParentFile().mkdir();
            }
            try {
                //保存文件
            	file.transferTo(dest);
            	
            } catch (IOException e) {
                e.printStackTrace();
            }
    	}
    	map.put("filename", "/images/"+file.getOriginalFilename());
		return map;
    }

以下就是最终效果

 

额，大概就结束了,

如有侵权，请联系我删除

千古  QQ:1466877104