百度编辑器ueditor整合SpringBoot项目

最新推荐文章于 2023-06-15 09:40:20 发布

半路马龙

最新推荐文章于 2023-06-15 09:40:20 发布

阅读量418

点赞数 2

文章标签： java 前端

本文链接：https://blog.csdn.net/weixin_45059962/article/details/106049157

版权

百度编辑器虽然功能强大，但是整合这个插件问题会有很多，搞了好久终于能用，在这里把整个过程最关键的部分记录下来，希望能帮到有需要的人。
1.下载插件，直接在百度编辑器官网下载，我下的是jsp版本。
2.在pom文件里导入以下依赖，这是ueditor用到的核心包，其实下载安装包时，编辑器会自带这几个jar包，不过这里还是建议自己导入。


<!-- 整合ueditor -->
<dependency>
 <groupId>org.json</groupId>
 <artifactId>json</artifactId>
 <version>20171018</version>
</dependency>

<dependency>
 <groupId>commons-codec</groupId>
 <artifactId>commons-codec</artifactId>
 <version>1.9</version>
</dependency>

<dependency>
 <groupId>commons-fileupload</groupId>
 <artifactId>commons-fileupload</artifactId>
 <version>1.3.1</version>
</dependency>

<dependency>
 <groupId>commons-io</groupId>
 <artifactId>commons-io</artifactId>
 <version>2.4</version>
</dependency>

<dependency>
 <groupId>com.gitee.qdbp.thirdparty</groupId>
 <artifactId>ueditor</artifactId>
 <version>1.4.3.3</version>
</dependency>

3.修改ueditor.config.js文件serverUrl，其实这个config.js直接关系到编辑器能不能实例化成功，最重要的就是serverUrl，如下

var URL = window.UEDITOR_HOME_URL || getUEBasePath();

/**
 * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
 */
window.UEDITOR_CONFIG = {

 //为编辑器实例添加一个路径，这个不能被注释
 UEDITOR_HOME_URL: URL

 // 服务器统一请求接口路径
 , serverUrl: "/config"

以上URL地址是项目根目录下ueditor的地址就是你的static文件下的ueditor地址，不要管他，这是默认的，关键是serverUrl，这个后面的路劲是你项目的一个handler方法，不要给他加什么url前缀，就让他访问我们的handler方法就ok了，这里是个重点，不管你搞个什么路劲，该路径必须对应到我们的handler方法，且必须能够访问，如果这个路劲错了，编辑器实例化就不能成功。
4.我的handler方法如下，取名为/config，请耐心阅读代码注释，避免踩坑


@RequestMapping("/config")
@ResponseBody
public Object getConfigInfo(HttpServletRequest request, HttpServletResponse response) throws IOException {

 // 设置响应类型
 response.setContentType("application/json");

 // 设置根路径，为什么说设置不是获取，因为这东西可以自己定义，不是死的
 // 这个根路径很重要，非常非常重要，这直接关系到，系统能不能加载到你的config.json文件
 // 重点：config.json文件一定要放在如下生成的rootPath下面，只有放这里才能被加载
 String rootPath= ClassUtils.getDefaultClassLoader().getResource("").getPath()+"static/";

 // 从这里开始是我自定义的上传图片的方法，因为ueditor的上传方法无故报错，找了好久找不到原因
 // 实在没有办法于是自己封装了工具类，并且实现了上传，而且config.json里的imageUrlPrefix和imagePathFormat
 // 两个重要参数都可以不用配置，上传图片工具类可以自己写，这个不难。

 // ueditor几乎所有请求都是来到config.js中配置的serverUrl路径，在我的项目里也就是这个config方法
 // 所有请求都找config，只是携带的参数有所不同，从而实现不同的功能，参数统一使用action作为键
 String action = request.getParameter("action");
 // 所以通过action获取请求的功能，当action是uploadimage时就是上传图片的功能
 if(action.equals("uploadimage")){
 // 开始执行自定义方法上传图片
 MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest)request;
 MultipartFile multipartFile = multipartHttpServletRequest.getFile("upfile");
 // 结果进行封装
 ResultEntity<String> resultEntity = UploadUtil.uploadFileTolocal(multipartFile.getInputStream(),multipartFile.getOriginalFilename());
 String type = resultEntity.getData().substring(resultEntity.getData().lastIndexOf("."));
 // 这个才是重点，不管你怎么折腾，ueditor不管，他只要6个返回值，缺一不可，而且统一封装到map集合中返回
 // 如下见名知意，按要求填写就ok了，重点说下url这个参数，这个是ueditor回显需要的路劲，这个必须要正确
 // 也就是不管你上传到哪儿，必须把你上传的路径返回
 if(resultEntity.getResult().equals("SUCCESS")) {
 Map<String,Object> map = new HashMap<String,Object>();
 map.put("original",multipartFile.getOriginalFilename());
 map.put("name",multipartFile.getOriginalFilename());
 map.put("url",resultEntity.getData());
 map.put("size",multipartFile.getSize());
 map.put("type",type);
 map.put("state","SUCCESS");
 return map;
 }
 }else {
  // 如果是实例化编辑器，就是这段代码，在本方法中只要不是上传图片其他请求都会来到这
  // 也就是获取config.js配置文件，去页面实例化编辑器
  try {
  String exec = new ActionEnter(request, rootPath).exec();
  PrintWriter writer = response.getWriter();
  writer.write(exec);
  writer.flush();
  writer.close();
  } catch (IOException e) {
  e.printStackTrace();
  }
 }
   return null;
}

以上，rootPath是关键，简单一句话，你生成的rootPath是什么，自己在控制台打印一下，然后把config.json文件放到这个rootPath下。
5.然后是前端页面,页面引入很简单，只需要导入两个重要文件。ueditor.config.js和ueditor.all.js两个文件，记住config.js必须在all.js前面这个顺序不能错了，然后按照script里的代码实例化即可。


<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
 <title>ueditor demo</title>
</head>
<body> <!-- 加载编辑器的容器 -->
 <script id="container" name="content" type="text/plain">这里写你的初始化内容</script> <!-- 配置文件 -->
 <script type="text/javascript" src="ueditor.config.js"></script> <!-- 编辑器源码文件 -->
 <script type="text/javascript" src="ueditor.all.js"></script> <!-- 实例化编辑器 -->
 <script type="text/javascript">     var ue = UE.getEditor('container'); </script>
</body>
</html>

6.按照这个配置，在controller里面随便搞个handler方法访问写的这个html页面，如果编辑器出现，就初步成功了，然后在访问如下url,注意这个localhost后面的config是我的handler方法名，如果你的方法名不一样，就改成你自己的方法名即可，后面的不用改。


localhost/config?action=config

如果出现一串json字符串，就代表成功了。
如果出现下面这样


{"state": "\u914d\u7f6e\u6587\u4ef6\u521d\u59cb\u5316\u5931\u8d25"}

别蒙，说明系统找不到你的config.json文件,也就是该文件没有放到你指定的rootPath下。
7.最后，部署到服务器时rootPath请设置为你的服务器项目根目录，也就是你存放项目jar包的地方，然后把config.json文件复制你的服务器项目根目录，这个也很重要，路径别搞错了，不然在本地机上能成，而在服务器上就不行。
最后，编辑器就算成功和你的项目整合了，以上都是我苦苦为这玩意儿折腾两天的心得，之前在网上搜了很多文章，但因为每个人的配置，和项目开发的技术选型都不一样，众说纷纭，难以找到关键点，于是自己在这里总结下最关键的地方，掌握了最关键的地方，问题就好办了。
最后总结一下：
config.js文件的serverUrl路劲，必须对应到你的handler方法。

handler方法中的rootPath可以自定义,但必须把config.json文件放到此路径下。

config.json主要用于文件的传输，比如上传图片，如果用不着这个功能，也可以不配置。

半路马龙

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
百度编辑器ueditor整合SpringBoot项目

如果开发网站，一款编辑器是必须的，我以前不知道有编辑器，于是自己手动添加p标签，实现分段。百度编辑器虽然功能强大，但是整合这个插件问题会有很多，搞了好久终于能用，在这里把整个过程最关键的部分记录下来，希望能帮到有需要的人。1.下载插件，直接在百度编辑器官网下载，我下的是jsp版本。2.在pom文件里导入以下依赖，这是ueditor用到的核心包，其实下载安装包时，编辑器会自带这几个jar包，不过这里还是建议自己导入。<dependency&gt
复制链接

扫一扫