SpringMVC + summernote 重写回调函数onImageUpload方法（2）

最新推荐文章于 2020-06-11 21:51:04 发布
最新推荐文章于 2020-06-11 21:51:04 发布
阅读量2.1k 收藏 2
点赞数 1
分类专栏： Javaspringmvc summernote 富文本 文章标签： summernote富文本onImageUpload方法重写
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a11441555/article/details/79789968
版权
本文介绍了如何在SpringMVC框架中重写summernote富文本编辑器的onImageUpload方法，以处理图片上传，避免使用base64数据URL。详细阐述了重写过程，包括发送AJAX请求、配置本地存储路径、控制层的文件上传实现，以及后续的文件删除策略，以优化服务器存储。
摘要由CSDN通过智能技术生成

这次就不废话了，我在上文SpringMVC + summernote可视化编辑器整合（1）

已经把如何配置和安装及集合springMVC框架已经说过了。

今天我们具体来说一说如何重写 summernote富文本编辑器中的回调函数——onImageUpload方法

该方法主要是用作我们在编辑器中：

  • 上传图片
  • 直接copy进图片

在summernote官网的API和函数已说明： https://summernote.org/deep-dive/

onImageUpload

Override image upload handler(default: base64 dataURL on IMG tag). You can upload image to server or AWS S3: more…

默认使用base64数据URL，这对我们将文章信息存入数据库真是天大的影响。

我们存入文章的思路也就是将 文章中的 标签、图片的标签+src等内容 统一存入数据库的一个列名里罢了。

所以我们需要重写

最低0.47元/天 解锁文章
dobtink
关注
专栏目录
summernote富文本的改写onImageUpload在服务器上传图片，并利用MutationObserver实时监测进行图片在服务器删除
ccccc_Jun的博客
01-25 5130
小弟的作品：http://robot.dgut.edu.cn/index.php/Admin/Index/add_content （求大佬们千万别黑了，虽然到处都是bug） 首先，声明，先去自行了解什么是summernote富文本编辑器：https://summernote.org/ 个人看法：主要是为了后台可以进行编辑，就好比你在公众号写文章，也是基于富文本编辑器来写的。 ...
使用summernote编辑器上传图片，重写onImageUpload
weixin_30408675的博客
06-12 444
JS部分：$('.summernote').summernote({ height: 200,//高度 tabsize: 2,//页面上的summernote编辑框的个数 lang: 'zh-CN',//语言 callbacks:{//回调函数，重写onImageUpload方法 onImageUpload: function(files, editor, w...
Image Upload for Summernote v0.8.1
eeliangsoft的专栏
05-24 390
Image Upload for Summernote v0.8.1$('#summernote').summernote({ height: ($(window).height() - 300), callbacks: { onImageUpload: function(image) { uploadImage(image[0]); ...
summernote 上传图片、删除图片
sincy09的博客
09-26 4523
summernote 上传图片 summernote官网的API和函数说明： https://summernote.org/deep-dive/ summernote 默认插入图片为base64数据 重写onImageUpload函数 在复制图片和插入图片时，函数生效。 $('.summernote').summernote({ callbacks: { ...
重写summernote插入图片的回调函数并上传图片到服务器
weixin_42395136的博客
06-11 869
summernote富文本编辑器有插入图片功能，不过默认使用base64数据URL，这就导致了整个文本内容特别长，加入一两张图片后就超出了mysql的text存储类型所能容纳的最大长度。 正常情况下，存储带图的文章时只需要携带图片的URL就行了，图片存在服务器的某个文件夹中，而不是直接存储到数据库。 好在summernote支持重写回调函数，下面是代码： JSP: <script> $(document).ready(function () { $('.summernot
Spring+SpringMVC+Mybatis框架整合例子(SSM) 下载
07-21
Spring、SpringMVC和Mybatis是Java开发中最常用的三大开源框架，它们的整合使用，通常被称为SSM框架。这个框架组合提供了完整的后端服务解决方案，包括依赖注入（DI）、面向切面编程（AOP）、模型-视图-控制器（MVC...
Java基于Spring+SpringMVC+MyBatis实现的学生信息管理系统源码.zip
05-04
Java基于Spring+SpringMVC+MyBatis实现的学生信息管理系统源码，SSM+Vue的学生管理系统。 Java基于Spring+SpringMVC+MyBatis实现的学生信息管理系统源码，SSM+Vue的学生管理系统。 Java基于Spring+SpringMVC+...
SpringMVC+Spring+Mybatis集成开发环境
04-28
2. 配置SpringMVC，包括视图解析器、拦截器、处理器映射和适配器等。 3. 配置Mybatis，包括数据源、SqlSessionFactory和Mapper接口。 4. 创建Service层，使用Spring的依赖注入获取DAO层对象，实现业务逻辑。 5. 编写...
完善的Spring+SpringMVC+Mybatis+easyUI后台管理系统(RESTful API+redis).zip
04-29
完善的Spring+SpringMVC+Mybatis+easyUI后台管理系统(RESTful API+redis).zip 完善的Spring+SpringMVC+Mybatis+easyUI后台管理系统(RESTful API+redis).zip 完善的Spring+SpringMVC+Mybatis+easyUI后台管理系统...
富文本-summernote的一个简单demo
08-17
亲测好使的一个富文本编辑器的demo
summernote富文本框整合图片上传和删除
07-17
summernote富文本框整合图片上传和删除,后台使用的阿里云oss文件服务器，此文件为前端代码
summernote编辑器批量上传图片
myeye520的博客
03-11 2091
首先布置编辑器 <link href="__CSS__/plugins/summernote/summernote.css" rel="stylesheet"> <link href="__CSS__/plugins/summernote/summernote-bs3.css" rel="stylesheet"> <form method="post" class=...
summernote处理上传图片到自己的服务器
zero_295813128的专栏
09-26 1万+
//富文本编辑器 $('#summernote').summernote({ height: 400, lang: 'zh-CN', focus:true, toolbar: [ ['style', ['bold', 'italic', 'underline', 'clear']],
修改Summernote文本编辑器支持上传图片到服务器
爱生活
05-25 1万+
官网：http://summernote.org/ Summernote是基于Bootstrap的文本编辑器 Summernote默认上传图片是保存二进制图片数据，这样会造成数据库庞大， 我们现在就把它修改为上传到服务器，直接保存路径地址 不多说，直接上干货 测试上传图片 Hello Summernote $(documen
一个不报错的summernote 上传图片案例
shenyingkui的专栏
05-13 1万+
一个比较完整的summernote上传图片的案例，没有后台（上传图片网上案例太多），只有前端js.修正了网上提供的，但是有bug的代码。 这个例子，js保证不报错。亲测可用     pageEncoding="utf-8"%> bootstrap-markdown .note-alarm { float: right
Bootstrap 可视化HTML编辑器，summernote
热门推荐
沉默王二
03-31 5万+
Bootstrap 可视化HTML编辑器之summernote，用其官网上的介绍就是“Super Simple WYSIWYG editor”，不过在我看来，与bootstrap中文官网上提供的“bootstrap-wysiwyg”要更simple，更漂亮，更好用！
summernote附件上传及图片上传
super苹果核的博客
09-26 7909
1.重写选择文件回调方法 //重写选择文件回调方法 $('.summernote').summernote({ height: 200, lang: 'zh-CN', onImageUpload: function onImageUpload(files) { var uuid = new UUID().toString(); var data = new FormD
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

dobtink

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值