summernote 富文本编辑器使用

背景：

最近需要做一个支持英文的blog，使用的小伙伴期望样式和排版更便捷一些。最后沟通商议选择了 summernote 编辑器，所见即所得，还支持从其他地方复制原文过来，并保留样式。

实现：

1、引入文件，从官网下载即可 Summernote - Super Simple WYSIWYG editor

<script charset="utf-8" src="${ctx }/content/summernote/summernote.min.js"></script>

<link rel="stylesheet" href="${ctx }/content/summernote/summernote.min.css" />

2、页面 初始化

<div class="noticeCententAdd"></div>

// 取值
var html=$('#noticeCententAdd').summernote('code');

3、summernote 初始化，支持AJAX上传图片

//调用富文本编辑
$(document).ready(function() {
    var $summernote = $('#noticeCententAdd').summernote({
       height: 300,
       focus: false,
       toolbar: [
          ['style', ['style']],
          ['font', ['bold', 'italic', 'underline',  'strikethrough', 'clear']],
          ['fontname', ['fontname']],
          ['fontsize', ['fontsize']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
          ['table', ['table']],
          ['insert', ['link', 'picture', 'video']],
          ['view', ['fullscreen', 'codeview', 'help']]
       ],
       callbacks: {
          onImageUpload: function (files) {
             sendFile($summernote, files[0]);
          }
       }
    });
     //ajax上传图片
    function sendFile($summernote, file) {
       var formData = new FormData();
       formData.append("sfile", file);
       $.ajax({
          url: "/summerUpload/img",//路径是你控制器中上传图片的方法，
          data: formData,
          cache: false,
          contentType: false,
          processData: false,
          type: 'POST',
          success: function (data) {
             console.log(data);
             if (data!=null){
                if(data.success || data.success=='true'){
                   $summernote.summernote('insertImage',data.fileSavePath);
                }else{
                   layer.msg(" 图片上传失败了! 原因：" + data.msg );
                }
             }
          }
       });
    }
});

4、后端图片上传代码

/**
 * 处理 summerNote 插入图片
 */
@Controller
@RequestMapping("/summerUpload")
public class SummerNoteController extends ImageController {

    @Value("${com.jf.obs.url}")
    private String obsUrl;

    @RequestMapping("/img")
    @ResponseBody
    public FileUpResult insertImg(HttpServletRequest request){
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        MultipartFile file = multipartRequest.getFile("sfile");
        FileUpResult rss = new FileUpResult();
        if(file.getSize() != 0){
            rss = addImage(file, "summerUpload");
        }
        if (rss.isSuccess()){  // 访问域名前缀
            rss.setFileSavePath(obsUrl+rss.getFileSavePath());
        }
        return rss;
    }

}