富文本编辑器上传图片操作 【springBoot+summernote +Jquery】

前置

//取值
var sHTML = $('.summernote').code();
//同一页面多个summernote时，取第二个的值
var sHTML = $('.summernote').eq(1).code();

//赋值
var markupStr = 'hello world';
$('.summernote').summernote('code', markupStr);
//或者:
$(".summernote").code(data.remark);

summernote 初始化

1. 指定一个元素

<input id="docContent" name="docContent"  th:value="${cmsDoc.docContent}" type="hidden">

2. 初始化summernote

    var $summernote = $('.summernote').summernote({
        height: '300px',  //默认高度
        lang: 'zh-CN',    //语言
        placeholder: "", //默认显示的提示
        callbacks: {
            onImageUpload: function (files, editor, $editable) {
                saveFile(files, editor, $editable);  //图片上传方法
            }
        }
    });

2.1 图片上传，java Controller示例：

function saveFile(files, editor, $editable) {
    var formdata = new FormData();
    formdata.append("file1", files[0]);
    $.ajax({
        url: "/basicCompany/basicCompany/uploadImg",
        data: formdata,
        contentType: false,
        processData: false,
        dataType: "json",
        cache: false,
        type: 'POST',
        success: function (data) {
            //回显图片
            $('.summernote').summernote('insertImage', 'http://49.4.82.173:10000' + data.img1);
            // editor.insertImage($editable, 'http://49.4.82.173:10000' + data.img1);
        }
    });
}

2.3 后台接收方法

	@RequestMapping("/uploadImg")
	@ResponseBody
	public String upload (@RequestParam("file1") MultipartFile file) throws Exception {
		String str = FileUpdate.uploadFile(file); //上传fastDFS 文件系统服务器
		Map<String,Object> params = new HashMap<>();
		params.put("img1", str);
		return JSONArray.toJSON(params).toString();
	}

此外可能是因为版本不同的原因，上述方法不能够成功，以下提供网上另外一种方法，本人亲测有效。

1. 设置div

2. 加载summernote

 $(document).ready(function () {
        $(".summernote").summernote({
            lang: "zh-CN",
            height: '300px',  //默认高度
            placeholder: "请输入请假内容", //默认显示的提示
            // callbacks: {
            onImageUpload: function (files,editor, $editable) {
                saveFile(files,editor, $editable);  //自定义上传方法
            }
            // }
        })
    });

3. 自定义上传方法

 function saveFile(files, editor, $editable) {
        var fd = new FileReader();
        fd.readAsDataURL(files[0]); //转base64
        fd.onload = function () {
            layer.msg("上传中");
            var obj = {};
            obj.data = fd.result;
            obj.fileName = 'aaa.jpg';
            $.ajax({
                url: prefix + "/common/uploadByBase64",
                data: JSON.stringify(obj),
                processData: false,
                contentType: false,
                dataType: "json",
                cache: false,
                type: 'POST',
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8'
                },
                success: function (data) {
                    if (data.code ==0) {
                        editor.insertImage($editable, imgPrefix + data.data.url); //图片路径
                        layer.msg("加载成功!");
                    } else if(data.code ==500){
                        layer.msg(data.message);
                    }
                }
            });
        }
    }

4. 后台使用JSONObject接收，并使用fastDFS进行上传