Springboot整合UEditor

最新推荐文章于 2024-03-31 03:01:48 发布

haoyue1014

最新推荐文章于 2024-03-31 03:01:48 发布

阅读量330

点赞数

分类专栏： java 文章标签： ueditor springboot thymeleaf

本文链接：https://blog.csdn.net/haoyue1014/article/details/89290207

版权

java 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

之前项目一直使用WangEditor，保存富文本至数据库，前端使用H5解析的时候没有任何问题，但是使用Vue的rich-text或者使用uparse组件解析的时候，存在诸多意想不到的问题，比如格式不正确、或者完全解析不出来的问题，以上项目中都碰到了。

经过再三对比，决定切换成UEditor，实践证明，在H5、Vue、uni-app、uparse富文本解析都完整体现出富文本的内容。项目问题彻底解决。

UEditor官方只提供了jsp的后端部署，如果要移植到Springboot项目中，需要做相应的修改。以下步骤主要参考：博文《springboot集成ueditor富文本编辑器（需要修改ueditor源码）》

项目前置条件：

1、使用thymeleaf模板引擎，因此html页面在src/main/resources/templates目录，js、css、image等静态资源都放在src/main/webapp/目录下，springboot项目没有templates和webapp目录，需要自行创建。

2、需要添加thymeleaf模板引擎pom依赖，否则html页面和静态资源都无法访问，thymeleaf模板引擎pom依赖如下：

         <!-- thymeleaf -->
         <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency> 
        <!-- thymeleaf legacyhtml5 模式支持 -->      
        <dependency> 
            <groupId>net.sourceforge.nekohtml</groupId> 
            <artifactId>nekohtml</artifactId> 
            <version>1.9.22</version> 
        </dependency>

3、PageController和静态html页面index.html，引导访问静态页面

@Controller
public class PageController {
	
	@GetMapping(value = "/index")
	public String index(){
		return "index";
	}
}

<!-- index.html -->
<!DOCTYPE html>
<html>
	<head>
		<title>ueditor demo</title>
		
	</head>
	<body>
	<h1>hello ueditor demo<h2>
	<body>
</html>

启动项目，浏览器输入: http://localhost:8080/index，页面显示"hello ueditor demo"即表明可以访问静态页面，可以继续往下走。

整合UEditor：

一、下载UEditor，地址：https://ueditor.baidu.com/website/download.html，本文下载了1.4.3.3完整源码

二、将下载的文件包解压，拷贝至webapp目录下（没有则需要创建，在src/main/目录下）

拷贝文件清单：其中editor_api.js在_examples目录下，很多文章都是ueditor.all.js，但是直接下载的压缩包都没有这个文件，这里使用editor_api.js，只不过在使用的时候需要修改里面的相对路径，后面详细讲解。

三、前端页面中引入UEditor的js文件

<!--  必须在editor_api.js前面，否则会报UE.getEditor is not function的错误 -->
<script type="text/javascript" src="js/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="js/ueditor/editor_api.js"></script>
<script type="text/javascript" src="js/ueditor/ueditor.parse.js"></script>
<script src="js/ueditor/lang/zh-cn/zh-cn.js"></script>

四、修改editor_api.js文件

由于editor_api.js是从_example目录中拷贝的，baseURL使用的是相对路径，而在spingboot项目中所有静态资源都在webapp目录下，访问路径位：js/xxx/xxx，故做如下修改：

修改前	修改后
baseURL = '../_src/';	baseURL = 'js/ueditor/_src/';

五、在index.html页面中创建Ueditor

<div id="ueditor"></div>
	<script type="text/javascript" src="js/ueditor/ueditor.config.js"></script>
	<script type="text/javascript" src="js/ueditor/editor_api.js"></script>
	<script type="text/javascript" src="js/ueditor/ueditor.parse.js"></script>
	<script type="text/javascript">

	var ue = UE.getEditor('ueditor',{
		enableAutoSave:false,
	        autoHeightEnabled: true,
	        autoFloatEnabled: true,
	        scaleEnabled:true//滚动条
		});
	</script>

启动项目后，浏览器输入http://localhost:8080/index即可看到ueditor编辑器，但是会提示后端服务器配置错误。

下面主要配置服务端，实现图片上传的功能。主要参考文章《springboot集成ueditor富文本编辑器（需要修改ueditor源码）》

六、将jsp里面的config.json文件拷贝至src/main/resources目录（重要）

七、添加Ueditor依赖的jar包

<!--UEditor依赖的jar包  start-->
<dependency>
    <groupId>org.json</groupId>
    <artifactId>json</artifactId>
    <version>20170516</version>
</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>
<!-- UEditor依赖的jar包  end  -->

八、将ueditor-1.4.3.3\jsp\src目录下的所有文件复制到工程目录src目录下

九、创建JSPController，映射/config

@Controller
@Transactional
public class JSPController {
	
	@RequestMapping("/config")
    @ResponseBody
    public void getConfigInfo(HttpServletRequest request,HttpServletResponse response) throws JSONException{
        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();
        }
    }
}

修改ConfigManage类的getConfigPath()方法

private String getConfigPath () {
	
           //return this.parentPath + File.separator + ConfigManager.configFileName;
	try {
		return this.getClass().getClassLoader().getResource("config.json").toURI().getPath();
	} catch (URISyntaxException e) {
		// TODO Auto-generated catch block
		System.out.println("ConfigManager->getConfigPath getConfigPath");
		return null;
	}
}

十一、配置ueditor.config.js文件

修改前

修改后

// 服务器统一请求接口路径

, serverUrl: URL + "php/controller.php"

// 服务器统一请求接口路径

, serverUrl: "/config"

十二、修改BinaryUploader 类，解决其无法获得带字节流的request的问题（注释部分为源码）

public static final State save(HttpServletRequest request,
	Map<String, Object> conf) {
	/*FileItemStream fileStream = null;
	boolean isAjaxUpload = request.getHeader( "X_Requested_With" ) != null;*/

	if (!ServletFileUpload.isMultipartContent(request)) {
		return new BaseState(false, AppInfo.NOT_MULTIPART_CONTENT);
	}

	/*ServletFileUpload upload = new ServletFileUpload(
		new DiskFileItemFactory());

        if ( isAjaxUpload ) {
            upload.setHeaderEncoding( "UTF-8" );
        }*/

	try {
		/*FileItemIterator iterator = upload.getItemIterator(request);

	while (iterator.hasNext()) {
		fileStream = iterator.next();

	if (!fileStream.isFormField())
		break;
	fileStream = null;
	}

	if (fileStream == null) {
		return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);
	}*/
	
	MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;
	MultipartFile multipartFile = multipartRequest.getFile(conf.get("fieldName").toString());
	if(multipartFile==null){  
                return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);  
            }  

	String savePath = (String) conf.get("savePath");
//			String originFileName = fileStream.getName();
	String originFileName = multipartFile.getOriginalFilename();  
	String suffix = FileType.getSuffixByFilename(originFileName);

	originFileName = originFileName.substring(0,
		originFileName.length() - suffix.length());
	savePath = savePath + suffix;

	long maxSize = ((Long) conf.get("maxSize")).longValue();

	if (!validType(suffix, (String[]) conf.get("allowFiles"))) {
		return new BaseState(false, AppInfo.NOT_ALLOW_FILE_TYPE);
	}

	savePath = PathFormat.parse(savePath, originFileName);

//			String physicalPath = (String) conf.get("rootPath") + savePath;
	String basePath=(String) conf.get("basePath");
	String physicalPath = basePath + savePath;

//			InputStream is = fileStream.openStream();
	InputStream is = multipartFile.getInputStream();  
	State storageState = StorageManager.saveFileByInputStream(is,
		physicalPath, maxSize);
	is.close();

	if (storageState.isSuccess()) {
		storageState.putInfo("url", PathFormat.format(savePath));
		storageState.putInfo("type", suffix);
		storageState.putInfo("original", originFileName + suffix);
	}

	return storageState;
	/*} catch (FileUploadException e) {
		return new BaseState(false, AppInfo.PARSE_REQUEST_ERROR);*/
	} catch (IOException e) {
	}
	return new BaseState(false, AppInfo.IO_ERROR);
}

十三、修改图片上传路径和图片访问前缀，打开config.json文件，修改下面红框内的内容，此处选择上传图片到本地，springboot的静态资源都在webapp目录下，所以要向你访问到上传的图片，必须配置basePath为webapp的目录。图片访问前缀没什么可说的。

十四、打开ConfigManager.java，增加

// 新增语句
conf.put( "basePath", this.jsonConfig.getString("basePath") );
conf.put( "savePath", savePath );
conf.put( "rootPath", this.rootPath );

打开BinaryUploader.java，将

将 
String physicalPath = (String) conf.get("rootPath") + savePath; 
修改为 
String basePath=(String) conf.get("basePath"); 
String physicalPath = basePath + savePath;

至此，运行项目，Ueditor图片上传功能正常了。

haoyue1014

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Springboot整合UEditor

之前项目一直使用WangEditor，保存富文本至数据库，前端使用H5解析的时候没有任何问题，但是使用Vue的rich-text或者使用uparse组件解析的时候，存在诸多意想不到的问题，比如格式不正确、或者完全解析不出来的问题，以上项目中都碰到了。经过再三对比，决定切换成UEditor，实践证明，在H5、Vue、uni-app、uparse富文本解析都完整体现出富文本的内容。项目问题彻底解...
复制链接

扫一扫

专栏目录