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")@ResponseBodypublic 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());}}

summernote富文本实现图片的删除相关推荐

summernote富文本实现图片上移下移功能
summernote富文本实现图片上移下移功能前言: 自己写了一套商品管理系统,商品的详情页维护是使用的summernote富文本.因为在CSDN上使用这个富文本看着还行,没想到自己使用起来太坑了, ...
bootstrap summernote富文本编辑器图片上传干货分享
个人技术网站欢迎关注今天做后台的时候需要一个富文本编辑器组件,由于项目使用的是bootstrap,所以毫不犹豫的用上了summernote富文本编辑器.文档各大大牛已经整理出来了但是图片上传到 ...
summernote富文本编辑器的自定义附件上传：不限于图片类型
summernote富文本编辑器的自定义附件上传前言一.自定义上传附件按钮和弹窗二.结合PHP上传文件进行后端处理三.用jq模拟点击添加链接方式去处理上传附件前言 summernote的上传 ...
summernote富文本编辑器基本使用
summernote富文本编辑器的基本使用一.简介二.下载: 三.基本使用: 1.引入js/css 2.建立一个div 3.用 js初始化操作 4.上传图片的Controller 5.过去编辑器内 ...
summernote富文本中上传图片并保存到Oracle数据库的问题解决
文章目录 Summernote 问题一:Uncaught TypeError: $(...).summernote is not a function 问题二 :GET http://***/summ ...
summernote富文本编辑器的基本使用
summernote富文本编辑器的基本使用(一) 本文主要是跟官网的一些翻译,也锻炼下英语水平.原英文网址http://summernote.org/getting-started/ 基础API 初始 ...
小程序展示后台编辑好的富文本[文字图片视频等]
小程序在开发的过程中都会遇到小程序官方给了富文本编辑器editor组件,但是只能在小程序端编辑,然后保存到后台的数据库中,但是一般都是网站后台编辑好,然后在小程序端展示后台编辑好的富文本信息.这样就可 ...
Django使用summernote富文本编辑器，完整前后端
今天项目中要使用summernote富文本编辑器,由于网上的基本都是在说用这个编辑器上传图片的,所以我就整理了一下上传图片和文本的代码,完整前后端. 这里我准备了一个demo,需要的可以直接复制 &l ...
Django中summernote富文本编辑器完整前后端
summernote富文本编辑器,由于网上的基本都是在说用这个编辑器上传图片的,所以我就整理了一下上传图片和文本的代码,完整前后端. 这里我准备了一个demo,需要的可以直接复制 Summernote ...

summernote富文本实现图片的删除

文章目录

summernote图片的删除

1.HTML界面引入summernote样式

2.javascript实现

3.控制层的实现

summernote富文本实现图片的删除相关推荐

最新文章

热门文章