SpringBoot整合UEditor教程

最新推荐文章于 2024-09-14 16:59:39 发布
最新推荐文章于 2024-09-14 16:59:39 发布
阅读量1w 收藏 15
点赞数 7
文章标签： springboot ueditor
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38091831/article/details/82936771
版权

UEditor只提供JSP版本的后端入口代码。但提供了项目源码，因此可以根据业务需求修改源代码。

1.新建SpringBoot项目

pom文件如下:

<?xml version="1.0" encoding="UTF-8"?>
<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.example</groupId>
	<artifactId>ueditor-test</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>jar</packaging>

	<name>ueditor-test</name>
	<description>Demo project for Spring Boot</description>

	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>1.5.2.RELEASE</version>

		<relativePath/> <!-- lookup parent from repository -->
	</parent>

	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
		<java.version>1.8</java.version>
			</properties>
	<dependencies>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>

		<dependency>
			<groupId>org.json</groupId>
			<artifactId>json</artifactId>
		</dependency>
		<dependency>
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.3.2</version>
		</dependency>
		<dependency>
			<groupId>commons-codec</groupId>
			<artifactId>commons-codec</artifactId>
			<version>1.9</version>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

2.从官网下载源代码并解压至项目resources/static下，注意config.json我拷到了ueditor路径下，ueditor.jar有些类需要修改源码，我全拿出来了，后面就不需要添加这个jar包了，如图:

3.运行项目。访问路径localhost:8080/ueditor/index.html，跳转到如下界面即是源码已拷贝成功

4.写入UEditorController类，映射路径为ueditor/config。

package com.example;

import com.baidu.ueditor.ActionEnter;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

/**
 * Created by ldb on 2017/4/9.
 */
@Controller
@RequestMapping("/ueditor")
public class UEditorController {
    
    @RequestMapping(value="/config")
    public void config(HttpServletRequest request, HttpServletResponse response) {
        response.setContentType("application/json");
        String rootPath = request.getSession().getServletContext().getRealPath("/");
        try {
            String exec = new ActionEnter(request, rootPath).exec();
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }

    }
}

5.一步一步debug，发现无法加载config.json文件。此时修改ConfigManage类的getConfigPath()方法。如下:

package com.baidu.ueditor;
 
import com.baidu.ueditor.define.ActionMap;
import org.json.JSONArray;
import org.json.JSONObject;
 
import java.io.*;
import java.net.URISyntaxException;
import java.util.HashMap;
import java.util.Map;
 
/**
 * 配置管理器
 * @author hancong03@baidu.com
 *
 */
public final class ConfigManager {
 
	private final String rootPath;
	private final String originalPath;
	private final String contextPath;
	private static final String configFileName = "config.json";
	private String parentPath = null;
	private JSONObject jsonConfig = null;
	// 涂鸦上传filename定义
	private final static String SCRAWL_FILE_NAME = "scrawl";
	// 远程图片抓取filename定义
	private final static String REMOTE_FILE_NAME = "remote";
	
	/*
	 * 通过一个给定的路径构建一个配置管理器， 该管理器要求地址路径所在目录下必须存在config.properties文件
	 */
	private ConfigManager ( String rootPath, String contextPath, String uri ) throws FileNotFoundException, IOException {
		
		rootPath = rootPath.replace( "\\", "/" );
		
		this.rootPath = rootPath;
		this.contextPath = contextPath;
		
		if ( contextPath.length() > 0 ) {
			this.originalPath = this.rootPath + uri.substring( contextPath.length() );
		} else {
			this.originalPath = this.rootPath + uri;
		}
		
		this.initEnv();
		
	}
	
	/**
	 * 配置管理器构造工厂
	 * @param rootPath 服务器根路径
	 * @param contextPath 服务器所在项目路径
	 * @param uri 当前访问的uri
	 * @return 配置管理器实例或者null
	 */
	public static ConfigManager getInstance ( String rootPath, String contextPath, String uri ) {
		
		try {
			return new ConfigManager(rootPath, contextPath, uri);
		} catch ( Exception e ) {
			return null;
		}
		
	}
	
	// 验证配置文件加载是否正确
	public boolean valid () {
		return this.jsonConfig != null;
	}
	
	public JSONObject getAllConfig () {
		
		return this.jsonConfig;
		
	}
	
	public Map<String, Object> getConfig ( int type ) {
		
		Map<String, Object> conf = new HashMap<String, Object>();
		String savePath = null;
		
		switch ( type ) {
		
			case ActionMap.UPLOAD_FILE:
				conf.put( "isBase64", "false" );
				conf.put( "maxSize", this.jsonConfig.getLong( "fileMaxSize" ) );
				conf.put( "allowFiles", this.getArray( "fileAllowFiles" ) );
				conf.put( "fieldName", this.jsonConfig.getString( "fileFieldName" ) );
				savePath = this.jsonConfig.getString( "filePathFormat" );
				break;
				
			case ActionMap.UPLOAD_IMAGE:
				conf.put( "isBase64", "false" );
				conf.put( "maxSize", this.jsonConfig.getLong( "imageMaxSize" ) );
				conf.put( "allowFiles", this.getArray( "imageAllowFiles" ) );
				conf.put( "fieldName", this.jsonConfig.getString( "imageFieldName" ) );
				savePath = this.jsonConfig.getString( "imagePathFormat" );
				break;
				
			case ActionMap.UPLOAD_VIDEO:
				conf.put( "maxSize", this.jsonConfig.getLong( "videoMaxSize" ) );
				conf.put( "allowFiles", this.getArray( "videoAllowFiles" ) );
				conf.put( "fieldName", this.jsonConfig.getString( "videoFieldName" ) );
				savePath = this.jsonConfig.getString( "videoPathFormat" );
				break;
				
			case ActionMap.UPLOAD_SCRAWL:
				conf.put( "filename", ConfigManager.SCRAWL_FILE_NAME );
				conf.put( "maxSize", this.jsonConfig.getLong( "scrawlMaxSize" ) );
				conf.put( "fieldName", this.jsonConfig.getString( "scrawlFieldName" ) );
				conf.put( "isBase64", "true" );
				savePath = this.jsonConfig.getString( "scrawlPathFormat" );
				break;
				
			case ActionMap.CATCH_IMAGE:
				conf.put( "filename", ConfigManager.REMOTE_FILE_NAME );
				conf.put( "filter", this.getArray( "catcherLocalDomain" ) );
				conf.put( "maxSize", this.jsonConfig.getLong( "catcherMaxSize" ) );
				conf.put( "allowFiles", this.getArray( "catcherAllowFiles" ) );
				conf.put( "fieldName", this.jsonConfig.getString( "catcherFieldName" ) + "[]" );
				savePath = this.jsonConfig.getString( "catcherPathFormat" );
				break;
				
			case ActionMap.LIST_IMAGE:
				conf.put( "allowFiles", this.getArray( "imageManagerAllowFiles" ) );
				conf.put( "dir", this.jsonConfig.getString( "imageManagerListPath" ) );
				conf.put( "count", this.jsonConfig.getInt( "imageManagerListSize" ) );
				break;
				
			case ActionMap.LIST_FILE:
				conf.put( "allowFiles", this.getArray( "fileManagerAllowFiles" ) );
				conf.put( "dir", this.jsonConfig.getString( "fileManagerListPath" ) );
				conf.put( "count", this.jsonConfig.getInt( "fileManagerListSize" ) );
				break;
				
		}
		
		conf.put( "savePath", savePath );
		conf.put( "rootPath", this.rootPath );
		
		return conf;
		
	}
	
	private void initEnv () throws FileNotFoundException, IOException {
		
		File file = new File( this.originalPath );
		
		if ( !file.isAbsolute() ) {
			file = new File( file.getAbsolutePath() );
		}
		
		this.parentPath = file.getParent();
		
		String configContent = this.readFile( this.getConfigPath() );
		
		try{
			JSONObject jsonConfig = new JSONObject( configContent );
			this.jsonConfig = jsonConfig;
		} catch ( Exception e ) {
			this.jsonConfig = null;
		}
		
	}
 
 
	private String getConfigPath () {
		//return this.parentPath + File.separator + ConfigManager.configFileName;
		try {
			//获取classpath下的config.json路径
			return this.getClass().getClassLoader().getResource("config.json").toURI().getPath();
		} catch (URISyntaxException e) {
			return null;
		}
	}
 
	private String[] getArray ( String key ) {
		
		JSONArray jsonArray = this.jsonConfig.getJSONArray( key );
		String[] result = new String[ jsonArray.length() ];
		
		for ( int i = 0, len = jsonArray.length(); i < len; i++ ) {
			result[i] = jsonArray.getString( i );
		}
		
		return result;
		
	}
	
	private String readFile ( String path ) throws IOException {
		
		StringBuilder builder = new StringBuilder();
		
		try {
			
			InputStreamReader reader = new InputStreamReader( new FileInputStream( path ), "UTF-8" );
			BufferedReader bfReader = new BufferedReader( reader );
			
			String tmpContent = null;
			
			while ( ( tmpContent = bfReader.readLine() ) != null ) {
				builder.append( tmpContent );
			}
			
			bfReader.close();
			
		} catch ( UnsupportedEncodingException e ) {
			// 忽略
		}
		
		return this.filter( builder.toString() );
		
	}
	
	// 过滤输入字符串, 剔除多行注释以及替换掉反斜杠
	private String filter ( String input ) {
		
		return input.replaceAll( "/\\*[\\s\\S]*?\\*/", "" );
		
	}
	
}

this.getClass().getClassLoader().getResource("config.json").toURI().getPath(); 
此处需要先转为URI再getPath()，否则如果你的项目路径带空格或者带中文则无法读取到文件

 

6.运行项目路径http://localhost:8080/config?action=config，如下图显示则表示可读取到config.json文件

7.上传个图片成功了

8..可是图片究竟上传到哪里了呢?继续一步步debug发现，上传到如图路径

如图路径为tomcat缓存路径，只要重启下tomcat该文件就会被删除。我们需要将其存储到磁盘中。此时修改config.json文件。

红色箭头为修改处。我需要将文件存储到E:/image/**下，此处我多添加了basePath，是想把视频、音乐等静态资源都存储到E盘。由于添加了basePath，需要修改配置。通过debug来到ConfigManage

添加红色箭头代码，将basePath塞进配置文件里。之后继续来到上传文件类BinaryUploader，修改如下代码:

运行项目，点击添加图片。打开E盘的image目录，如图，成功上传到E盘对应路径

运行项目，点击添加图片。打开E盘的image目录，如图，成功上传到E盘对应路径

9.打开浏览器，发现页面无法加载图片。如下图:

无法获取到图片。这是当然的，因为我们把图片存在E盘了，而spring并没有对E盘目录进行映射。此时我们加入路径映射。打开application.properties文件，添加如下代码

spring.resources.static-locations=classpath:static/,file:static/,file:E:/

此时重新运行项目，点击上传图片，图片已经能够正常显示了。

10.至此，SpringBoot整合UEditor应该完了吧。别急，SpringBoot主张打包成Jar包运行，我们用Maven来打包运行试试

java -jar  打开项目地址，点击上传图片，发现竟然上传不了了??!!

这是怎么回事呢?为什么打成Jar包后就无法上传图片了呢。经过不断的debug和google。。发现了在Jar包里无法以ClassLoader.getResource().getPath()获得的路径读取文件，得用Class类的getResourceAsStream()来读取。具体博文如下:

http://hxraid.iteye.com/blog/483115?page=3#comments

11.那么我们就来修改源码，改成getResourceAsStream读取config.json文件吧。打开ConfigManager类，修改initEnv方法

private void initEnv () throws FileNotFoundException, IOException {
		
		File file = new File( this.originalPath );
		
		if ( !file.isAbsolute() ) {
			file = new File( file.getAbsolutePath() );
		}
		
		this.parentPath = file.getParent();
		
		//String configContent = this.readFile( this.getConfigPath() );
		String configContent = this.filter(IOUtils.toString(this.getClass().getClassLoader().getResourceAsStream("config.json")));
 
		try{
			JSONObject jsonConfig = new JSONObject( configContent );
			this.jsonConfig = jsonConfig;
		} catch ( Exception e ) {
			this.jsonConfig = null;
		}
		
	}

12. ok了，再次打包，运行项目

成功了!!!

项目源码:https://gitee.com/zhengea/springboot-ueditor.git

本次教程到此结束。谢谢大家

农民奔小康
关注
Spring boot 整合Ueditor(百度编辑器) 简洁版(图片上传)
cocosum
10-19 1579
1、先给大家拜个早年！ 看个效果图: 2、去百度官网下载UEditor。机票 3、下载下来是这样的: # config.json 配置文件（需要引用） # controller.jsp springboot默认不支持jsp的，所以在这里咱也不用。 # ueditor.config.js 这个需要，直接引入页面就行了。一共引入三个就行了 <!--...
SpringBoot整合UEditor文本编辑器
04-24
修改config.json文件的图片存储路径即可 运行项目.访问路径localhost:8080/
spring boot整合UEditor，不改源码，真实有效
Forever_and_ever的博客
10-23 5854
UEditor以前在php项目中使用过，是一款非常强大的富文本编辑器,内部实现了各种上传功能，我们甚至不用写任何代码，只需要在所需的项目中正确引入ueditor即可。最近在学习java spring boot框架，项目中也选择这款编辑器。但是配置却出现了很多问题，是我没有想到的。因为用thinkphp5来引用时基本不需要任何配置，引入几个js文件就行了。然而在spring boot 中却没有那...
Spring Boot与Thymeleaf整合百度Ueditor的集成示例
最新发布
weixin_28913879的博客
09-14 1365
本文还有配套的精品资源，点击获取 简介：本文详细介绍了如何将Spring Boot、Thymeleaf和百度Ueditor整合，以构建一个Web应用程序中的富文本编辑器。通过逐步集成，包括添加依赖、配置Ueditor、创建Controller、配置Thymeleaf模板和文件上传处理等关键步骤，开发者可以快速掌握集成这一功能强大的富文本编辑器的过程，并确保后端配置和文件上传...
SpringBoot最佳整合ueditor的解决方案
絮落锦乡的博客
08-09 1914
Spring Boot整合ueditor教程，不需要更高源码，支持，html或者是集成了jsp两种方式 一、使用springboot集成jsp方式 1、下载jsp版本的ueditor 2、搭建springboot工程，集成jsp （1）、新建项目 ...
springboot整合ueditor百度富文本编辑器详细教程
qq_40618664的博客
07-05 3287
第一步：到官方下载ueditor https://ueditor.baidu.com/website/download.html 解压，放到项目目录static下 第二步：引入到前端页面中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl...
SpringBoot整合UEditor富文本编辑器
05-07
springboot整合ueditor，由于项目是springcloud分布式项目,注册中心和其他服务未上传,下载的同学看代码路径和配置即可.资料参考地址: https://blog.csdn.net/a1053765496/article/details/105965560
springboot整合UEditor亲测有效.zip
06-19
本教程将围绕"SpringBoot整合UEditor亲测有效.zip"这一主题展开，详细讲解如何在SpringBoot项目中集成UEditor富文本编辑器，并基于博客文章中的实践进行讨论。 UEditor是一款由百度开源的JavaScript富文本编辑器，...
详解springboot整合ueditor踩过的坑
08-19
在本文中，我们将深入探讨如何在SpringBoot应用中整合ueditor富文本编辑器，并解决在此过程中可能遇到的一些问题。ueditor是一款由百度开发的强大的富文本编辑器，它支持多种功能，包括本地视频上传，而这在许多现代...
springboot整合ueditor源码
08-03
springboot和ueditor的整合，下载下来只需要修改index.html中的地址就可以。具体搭建的步骤在：https://www.jianshu.com/p/231e83c13610 中，大家可以参考。
SpringBoot整合UEditor的示例代码
08-28
SpringBoot整合UEditor的示例代码 本篇文章主要介绍了SpringBoot整合UEditor的示例代码，包括如何在SpringBoot项目中整合UEditor富文本编辑器，以便在项目中使用UEditor来编辑富文本内容。 UEditor简介 UEditor是...
springboot整合ueditor的demo
12-28
本demo简单明了，容易理解，快速接入已有项目，很好的
springBoot集成jsp和ueditor
08-09
springboot集成jsp加入了ueditor，原始的servlet集成和ssh集成，ssm集成，都有相对应的源码，
Springboot整合UEditor
haoyue1014的专栏
04-13 353
之前项目一直使用WangEditor， 保存富文本至数据库，前端使用H5解析的时候没有任何问题，但是使用Vue的rich-text或者使用uparse组件解析的时候，存在诸多意想不到的问题，比如格式不正确、或者完全解析不出来的问题，以上项目中都碰到了。 经过再三对比，决定切换成UEditor，实践证明，在H5、Vue、uni-app、uparse富文本解析都完整体现出富文本的内容。项目问题彻底解...
springboot 集成ueditor
jiaHey的博客
04-27 6469
1下载ueditor的jsp版本 这里不做介绍，自行下载即可 2将文件放在ser/main/resources/static中 将下载好的文件夹放在 3导入ueditor的jar包 导入ueditor的jar包，只导入这四个这里要注意的是springboot跟ueditor原本的jar包会有冲突，需要自己修改，大家可直接下载我的jarhttp://
springboot集成Ueditor(踩坑)
小牛呼噜噜的博客
09-05 3174
本人只是将平时的笔记心得与大家分享一下 项目需要用到富文本，本人选择百度的Ueditor，虽然功能很强大，但坑非常多，我们来慢慢踩。 1、下载ueditor jsp utf-8 我这里给出，我下载的地址https://ueditor.baidu.com/website/download.html 下载jsp utf-8版 2、下载下来的文件目录： 3、为什么有说有很多坑呢？ 因...
springboot集成ueditor
qq_35703608的博客
02-18 728
springboot 集成百度ueditor服务端部分
springboot ueditor 整合篇
李浩洋
06-12 1895
一、上传文件到本地版本 项目地址：https://github.com/weiangongsi/ueditor-spring-boot-starter 文件导入 新建springboot项目 不需要下载本项目，jar包已经上传到maven仓库 pom文件引入 &lt;dependency&gt; &lt;groupId...
Spring Boot集成百度Ueditor
weixin_30721899的博客
10-27 150
遇到的问题： 　　1.将ueditor加入/static目录下，能正常显示，但是出现“请求后台配置项http错误，上传功能将不能正常使用！”（解决在下面，都是自定义上传的，如果需要官方的示例，我也无能为力，没搞出来........） 　　2.解决问题一后，出现“上传失败”（解决在下面，同上） 默认情况下上传图片时的请求过程： 　　首先，初始化Ueditor插件时，在ueditor.all....
springboot 整合ueditor
10-31
SpringBoot 整合 UEditor 可以通过引入 UEditor 的 jar 包和配置相关参数来实现。具体步骤如下： 1. 在 pom.xml 文件中引入 UEditor 的 jar 包。 2. 在 application.properties 文件中配置 UEditor 的相关参数，例如...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值