summernote 的快速使用，以及解决图片写入数据库问题

summernote 是一款优秀的富文本编辑器，外观优雅，功能强大，使用便捷，支持图片自适应展示

官方网站 https://summernote.org/

但是插入图片时有个巨大缺陷，summernote默认是将图片转成base64的形式写入到数据库中

这样会给数据库造成巨大的存储量，经过多方改造，基本可以满足开发使用需要，附上代码

<link href="$!{basePath}/plug-in/summernote/dist/summernote.css" target="_blank" rel="external nofollow" rel="stylesheet"/>

<script src="$!{basePath}/plug-in/summernote/dist/summernote.js"></script>

<script src="$!{basePath}/plug-in/summernote/lang/summernote-zh-CN.js"></script>

<div class="col-sm-12" style="padding: 0;">

    <div id="summernote">$!{anInfo.answer}</div>

</div>

<script type="text/javascript">

$('#summernote').summernote({

    height : '220px',

    lang : 'zh-CN',

       callbacks: {

         onImageUpload: function(files,editor,$editable) {

                 sendFile(this,files[0], editor,$editable);

         }

       }

});

//ajax上传图片

function sendFile(obj,file, editor,$editable) {

    var  filename=false;

    try{

        filename=file['name'];

    }catch(e){

        filename=false;

    }

    if(!filename){

        $(".note-alarm").remove();

    }

    //防止重复提交

    var formData = new FormData();

    formData.append("file", file);

    //formData.append("key",filename);//唯一参数性

    $.ajax({

        url: "$!{basePath}/fileUpload/uploadEditorImg.do",//路径是你控制器中上传图片的方法

        data: formData,

        cache: false,

        contentType: false,

        processData: false,

        type: 'POST',

        success: function (data) {

            debugger;

            $(obj).summernote('insertImage', data.path);

        }

    });

}

</script>

//上传后台

@RequestMapping(value = "uploadEditorImg", method = { RequestMethod.POST, RequestMethod.GET })

@ResponseBody

public synchronized Map<String, Object> uploadEditorImg(HttpServletRequest request, HttpServletResponse response) throws Exception {

    MultipartHttpServletRequest mr = (MultipartHttpServletRequest) request;

    Map<String, Object> map = new HashMap<>();

    Iterator<String> iterator = mr.getFileNames();

    while (iterator.hasNext()) {

        MultipartFile multipartFile = mr.getFile(iterator.next());

        // 原文件名

        String oldFileName = multipartFile.getOriginalFilename();

        // 文件后缀

        String suffix = oldFileName.substring(oldFileName.lastIndexOf("."));

        // 文件夹

        String folder = sdf.format(new Date());

        // 文件相对路径 basePath=/opt

        String frontPath = basePath + File.separator + FileEnum.EDITOR + File.separator + folder;

        File dir = new File(frontPath);

        if (!dir.exists()) {

            dir.mkdirs();

        }

        // 新文件名称

        String newFileName = UUIDGenerator.getId() + suffix;

        File newFile = new File(frontPath + File.separator + newFileName);

        multipartFile.transferTo(newFile);

        map.put("oldFileName", oldFileName);

        map.put("newFileName", newFileName);

        map.put("filePath", folder + File.separator + newFileName);

        map.put("fullFilePath", frontPath + File.separator + newFileName);

        //domain.name=www.xxx.cn

        map.put("path", PropertieUtil.readProperty("domain.name") + "/fileUpload/showEditorImg.do?fullpath=" + folder + File.separator + newFileName);

        System.out.println(PropertieUtil.readProperty("domain.name") + "/fileUpload/showEditorImg.do?fullpath=" + folder + File.separator + newFileName);

    }

    return map;

}

//展示

@RequestMapping(value = "showEditorImg", method = { RequestMethod.POST, RequestMethod.GET })

@ResponseBody

public void showEditorImg(HttpServletRequest request, HttpServletResponse response) throws Exception {

    String fullpath = request.getParameter("fullpath"); // 文件名

    FileInputStream fileInputStream = null;

    OutputStream outStream = null;

    try {

        fileInputStream = new FileInputStream(basePath + File.separator + FileEnum.EDITOR + File.separator + fullpath);

        int i = fileInputStream.available(); // 得到文件大小

        byte data[] = new byte[i];

        fileInputStream.read(data); // 读数据

        response.setContentType("image/*"); // 设置返回的文件类型

        outStream = response.getOutputStream(); // 得到向客户端输出二进制数据的对象

        outStream.write(data); // 输出数据

    } catch (Exception e) {

        LogUtil.error("系统找不到文件：" + fullpath);

    } finally {

        if (outStream != null) {

            outStream.flush();

            outStream.close();

        }

        if (fileInputStream != null) {

            fileInputStream.close();

        }

    }

}

注：默认插入图片时是以px设置宽度，这样没法满足自适应要求，注意单击图片选择百分比，PC端和移动端展示都可以满足自适应