springboot整合Ueditor富文本编辑器，图片上传路径修改，解决maven项目打包不能查看图片问题

最新推荐文章于 2023-02-10 14:12:01 发布

置顶大头目T

最新推荐文章于 2023-02-10 14:12:01 发布

阅读量599

点赞数

分类专栏：前端文章标签： html java

本文链接：https://blog.csdn.net/weixin_44315761/article/details/109291491

版权

前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。

UEditor文档

我的源码地址

maven依赖

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.tangshuai</groupId>
  <artifactId>springboot_ueditor</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  <!-- SpringBoot核心jar包 -->
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.1.4.RELEASE</version>
	</parent>

	<!-- 添加典型的web应用的相关依赖 -->
	<dependencies>
		<dependency>
			<groupId>com.auth0</groupId>
			<artifactId>java-jwt</artifactId>
			<version>3.8.3</version>
		</dependency>
		<!-- 添加shiro-spring依赖 -->
		<!-- https://mvnrepository.com/artifact/org.apache.shiro/shiro-spring -->
		<dependency>
			<groupId>org.apache.shiro</groupId>
			<artifactId>shiro-spring</artifactId>
			<version>1.4.0</version>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<!--thymeleaf-shiro-extras -->
		<dependency>
			<groupId>com.github.theborakompanioni</groupId>
			<artifactId>thymeleaf-extras-shiro</artifactId>
			<version>2.0.0</version>
		</dependency>
		<!--面向切面 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-aop</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-tomcat</artifactId>
			<!-- provided表明该包只在编译和测试的时候用 -->
			<scope>provided</scope>
		</dependency>
		<!-- Mysql数据库 -->
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
		</dependency>
		<!-- MybatisPlus -->
		<dependency>
			<groupId>com.baomidou</groupId>
			<artifactId>mybatis-plus-boot-starter</artifactId>
			<version>3.2.0</version>
		</dependency>
		<!-- 启动器 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter</artifactId>
		</dependency>
		<dependency>
			<groupId>com.github.pagehelper</groupId>
			<artifactId>pagehelper</artifactId>
			<version>4.1.6</version>
		</dependency>
		<!-- springboot热部署 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<optional>true</optional>
		</dependency>
		<!-- 测试 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
		</dependency>
		<!-- 添加缓存 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-cache</artifactId>
		</dependency>
		<!-- 数据源 -->
		<!-- https://mvnrepository.com/artifact/com.alibaba/druid -->
		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>druid</artifactId>
			<version>1.1.12</version>
		</dependency>
		<!--图形验证码 -->
		<dependency>
			<groupId>com.github.penggle</groupId>
			<artifactId>kaptcha</artifactId>
			<version>2.3.2</version>
		</dependency>
		<!-- 百度富文本编辑器 -->
		<dependency>
			<groupId>cn.jasonone.ueditor</groupId>
			<artifactId>ueditor-spring-boot-starter</artifactId>
			<version>1.2.0</version>
		</dependency>
		<!-- 导出pdf相关依赖itext -->
		<dependency>
			<groupId>com.itextpdf</groupId>
			<artifactId>itextpdf</artifactId>
			<version>5.4.2</version>
		</dependency>

		<dependency>
			<groupId>com.itextpdf.tool</groupId>
			<artifactId>xmlworker</artifactId>
			<version>5.4.1</version>
		</dependency>

		<dependency>
			<groupId>com.itextpdf</groupId>
			<artifactId>itext-asian</artifactId>
			<version>5.2.0</version>
		</dependency>

		<dependency>
			<groupId>org.xhtmlrenderer</groupId>
			<artifactId>flying-saucer-pdf</artifactId>
			<version>9.0.3</version>
		</dependency>
		<!-- swagger相关 -->
		<dependency>
			<groupId>io.springfox</groupId>
			<artifactId>springfox-swagger2</artifactId>
			<version>2.2.2</version>
		</dependency>
		<dependency>
			<groupId>io.springfox</groupId>
			<artifactId>springfox-swagger-ui</artifactId>
			<version>2.2.2</version>
		</dependency>
	</dependencies>
	<!-- 添加一个spring boot的插件，可以通过spring boot插件来将web应用打包成一个可执行的war文件 -->
	<build>
		<finalName>greewonerp</finalName>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
			<!-- JDK1.8插件 -->
			<plugin>
				<groupId>org.apache.maven.plugins</groupId>
				<artifactId>maven-compiler-plugin</artifactId>
				<configuration>
					<source>1.8</source>
					<target>1.8</target>
					<encoding>utf-8</encoding>
				</configuration>
			</plugin>
		</plugins>
	</build>
</project>

1.配置虚拟图片服务器地址

@Configuration
public class WebMvcConfig implements WebMvcConfigurer  {
	@Override
	public void addResourceHandlers(ResourceHandlerRegistry registry) {
		registry.addResourceHandler("/picture/**").addResourceLocations("file:C:/Pictureserver/");
		registry.addResourceHandler("/ueditorpicture/**").addResourceLocations("file:/C:/Ueditorfile/");
	}
}

2.重写富文本编辑器方法

@Controller
public class ServerController {

	@RequestMapping("/config")
	@ResponseBody
	public String config(HttpServletRequest request, HttpServletResponse response) {
		String json = "";
		response.setContentType("application/json");
		// 获取项目在磁盘的绝对路径
		String path = ClassUtils.getDefaultClassLoader().getResource("").getPath();
		try {
			// 将josn文件读到Stirng
			json = IOUtils.toString(new FileInputStream(new File(path + "/static/ueditor/jsp/config.json")),
					Charsets.UTF_8.toString());
		} catch (Exception e) {
			e.printStackTrace();
		}
		return json;
	}

	@RequestMapping("/uploadImageData")
	@ResponseBody
	public Map<String, String> uploadImage(@RequestParam("upfile") MultipartFile upfile, HttpServletRequest request)
			throws IOException {
		// 文件原名称
		String fileName = upfile.getOriginalFilename();
		// 保存文件的新名字
		String nowName = UUID.randomUUID() + fileName.substring(upfile.getOriginalFilename().lastIndexOf("."));
		String uploadPath = "";
		if (!upfile.isEmpty()) {
			String path = "C:/Ueditorfile/";
			File f = new File(path);
			if (!f.exists()) {
				// 第一次上传文件新建文件夹
				f.mkdirs();
			}
			uploadPath = path + nowName;
			// 按照路径新建文件
			File newFile = new File(uploadPath);
			if (!newFile.exists()) {
				newFile.createNewFile();
			}
			// 复制
			FileCopyUtils.copy(upfile.getBytes(), newFile);
		}
		// 返回结果信息(UEditor官方要求这个json格式)
		Map<String, String> map = new HashMap<String, String>();
		// 是否上传成功
		map.put("state", "SUCCESS");
		// 现在文件名称
		map.put("title", nowName);
		// 文件原名称
		map.put("original", fileName);
		// 文件类型 .+后缀名
		map.put("type", fileName.substring(upfile.getOriginalFilename().lastIndexOf(".")));
		// 文件路径
		// map.put("url", uploadPath); // 浏览器不能直接访问项目外目录的图片等文件，需要做虚拟路径映射
		map.put("url", "/ueditorpicture/" + nowName); // 这个路径的 /PathImage/ 是在配置类里指定的映射到本地的绝对路径
		// 文件大小（字节数）
		map.put("size", upfile.getSize() + "");
		return map;
	}
}

3.修改ueditor.config.js

在这里插入图片描述

html配置

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>
</head>
<body>
	
	<div class="form-group">
		<label>文章标题:</label> <input class="form-control input-lg" type="text"
											placeholder="请输入文章标题...">
	</div>
									
	<script type="text/javascript">
		//实例化编辑器
		UE.getEditor('editor');
		UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
		UE.Editor.prototype.getActionUrl = function(action) {
			// 这里很重要，很重要，很重要，要和配置中的imageActionName值一样
			if (action == 'uploadimage') {
				// 这里调用后端我们写的图片上传接口
				return '/uploadImageData';
			} else if (action == 'uploadfile') {
				return '/uploadFileData';
			} else {
				return this._bkGetActionUrl.call(this, action);
			}
		}
	</script>

</body>
</html>

大功告成

在这里插入图片描述

大头目T

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
springboot整合Ueditor富文本编辑器，图片上传路径修改，解决maven项目打包不能查看图片问题

1.配置虚拟图片服务器地址@Configurationpublic class WebMvcConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/picture/**").addResourceLocations("file:C:/Pictureserver/"
复制链接

扫一扫