summernote富文本实现图片的删除

---

summernote图片的删除

1.HTML界面引入summernote样式

代码如下：

<th:block th:include="include :: summernote-css"/>
     <input name="xzms" id="xzms" th:field="*{xzms}" type="hidden">
     <div id="editor" class="summernote"></div>

2.javascript实现

代码如下：

<th:block th:include="include :: summernote-js"/>
     $(function() {
		    $('.summernote').summernote({
		    	placeholder: '现状描述',
		    	height : 192,
				lang : 'zh-CN',
				followingToolbar: false,
				callbacks: {
	                onImageUpload: function (files) {
	                    sendFile(files[0], this);
	                },
	                onMediaDelete: function(target) {
	                    deleteFile(target);
	                }
	            }
		    });
         //下面两行代码实现回显
		    var xzms = $("#xzms").val();
		    $('#editor').summernote('code', xzms);
        });

//删除图片
	    function deleteFile(target) {
	        var deleteImg = target[0].currentSrc;
	        var data = new FormData();
	        data.append("deleteImg",deleteImg);
	        $.ajax({
	            data: data,
	            type: "POST",
	            url: ctx + "common/removeFile",
	            cache: false,
	            contentType: false,
	            processData: false,
	            success: function(data){
	                console.log(data);
	            },
	            error: function(error) {
	                $.modal.alertWarning("图片删除失败");
	            }
	        });
	    }

3.控制层的实现

 /**
     * 通用文件删除
     * */
    @PostMapping("/removeFile")
    @ResponseBody
    public AjaxResult removeFile(@RequestParam("deleteImg") String deleteImg)throws Exception
    {
        try{
            boolean b = FileUtils.deleteFile(deleteImg);

            AjaxResult ajax = AjaxResult.success();
            ajax.put("filePath",deleteImg);
            ajax.put("status",b);
            return ajax;
        }
        catch (Exception e){
            return AjaxResult.error(e.getMessage());
        }

    }

---