使用Summernote插件将图片上传至服务器

最新推荐文章于 2023-05-29 12:00:02 发布

Fjtd_2019

最新推荐文章于 2023-05-29 12:00:02 发布

阅读量941

点赞数 1

分类专栏：工作学习

本文链接：https://blog.youkuaiyun.com/Fjtd_2019/article/details/103533860

版权

本文介绍了如何在公司项目中利用Summernote富文本编辑器结合jsp、servlet或SSM框架，实现图文发布并保存到MySQL数据库。详细步骤包括项目结构设置、配置文件调整、实体类和服务实现，特别强调了静态资源的正确引用和图片上传处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近，在做公司的项目时，有一个功能需要用到富文本编辑器发布文字及图片，并能从数据库中读取并显示到相关页面上，在网上搜集了资料后，经过自己的一些整改，写下了一个demo。使用的是summernote富文本编辑器，数据库使用的是mysql。demo我写下了两种，分别是使用jsp+servlet的模式，以及SSM框架的模式。
先上图：
在这里插入图片描述
上图是summernote插件最基础的效果，从官网中下载下来的压缩包里包括这些文件：

但实际上使用，只需要有以下的文件即可：
css文件：
注意：font文件夹必不可少，如果缺少可能会导致工具栏显示不正常！
js文件：在这里插入图片描述
其中cn结尾的js文件是将控件汉化。
接下来先展示SSM框架的项目结构：

注意：需要现在spring配置文件中配置如下：

接下来是实体类：

  	private int id;//图片的id
	private String pic_url;//图片地址，用于存储数据库
	private String content;//文本内容

mapper层（这里使用的是xml+interface的方式）

public interface NoticeMapper {
   
@Insert("insert into tb_notice(\r\n" + 
		"		id,\r\n" + 
		"		pic_url,\r\n" + 
		"		content\r\n" + 
		"		) values(id=#{id},pic_url=#{pic_url},content=#{content})")
public Object add(NoticeInfo noticeInfo);

service层：

	public interface NoticeService {
   
	public Object insert(NoticeInfo noticeInfo);
}

serviceImpl层：

@Service
	public class NoticeServiceImpl implements NoticeService{
   
@Autowired
	private NoticeMapper mapper;

@Override
	public Object insert(NoticeInfo noticeInfo) {
   
	return mapper.add(noticeInfo);
}

controller层：

在这里插入代码片

这里使用的是Spring上传文件的工具MultipartResolver ，使用时需要引入相关jar包：

在这里插入图片描述

因为没有使用maven，为了方便查看数据库的操作，还引入了log4j工具，在引入jar之后还需要在项目目录下新建一个log4j.properties文件，文件内容如下：

#定义LOG输出级别
log4j.rootLogger=INFO,Console,File

#定义日志输出目的地为控制台
log4j.appender.Console=org.apache.log4j.ConsoleAppender
log4j.appender.Console.Target=System.out
#可以灵活的指定日志输出格式，下面一行是指定具体的格式
log4j.appender.Console.layout=org.apache.log4j.PatternLayout
log4j.appender.Console.layout.ConversionPattern=[%c]-%m%n

#mybatis显示SQL语句日志配置  
#log4j.logger.org.mybatis=DEBUG
log4j.logger.com.lya.mapper=DEBUG //这里换成自己项目包名


#文件大小到达指定尺寸的时候产生一个新的文件
log4j.appender.File=org.apache.log4j.RollingFileAppender
#指定输出目录
log4j.appender.File.File=logs/ssm.log
#定义文件最大大小
log4j.appender.File.MaxFileSize=10MB
#输出所有日志，如果换成DEBUG表示输出DEBUG以上级别日志
log4j.appender.File.Threshold=ALL
log4j.appender.File.layout=org.apache.log4j.PatternLayout
log4j.appender.File.layout.ConversionPattern=[%p][%d{
   yyyy-MM-dd HH\:mm|\:ss}][

最低0.47元/天解锁文章