SpringBoot整合Ueditor富文本编辑器

下载

百度Ueditor

下载完成后解压，得到 utf8-jsp 文件夹，将其重命名为 ueditor，再将其复制到springboot 项目中

使用

1.在项目中添加以下依赖：

<!-- ueditor--><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.2</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.4</version></dependency><dependency><groupId>org.json</groupId><artifactId>json</artifactId><version>0810</version></dependency><!-- 跨域上传文件--><dependency><groupId>com.sun.jersey</groupId><artifactId>jersey-core</artifactId><version>1.18.1</version></dependency><dependency><groupId>com.sun.jersey</groupId><artifactId>jersey-client</artifactId><version>1.18.1</version></dependency>

然后重点关注这些文件

config.json：上传功能的主要配置项

ueditor.config.js：完整配置项

2.在页面中引用（此处用的是Thymeleaf）：

<script type="text/javascript" charset="utf-8" src="/static/ueditor/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="/static/ueditor/ueditor.all.min.js"> </script><script type="text/javascript" charset="utf-8" src="/static/ueditor/lang/zh-cn/zh-cn.js"></script>

3.实例化编辑器：

<div><script name="text" id="editor" type="text/plain" style="width:100%;height:800px;"></script></div><script type="text/javascript">/*实例化编辑器 */var um = UE.getEditor('editor');</script>

注意：此时上传功能不正常，可以在开发者工具中看见“后端配置项不正确，上传功能无法使用”的情况

问题缘由：

请求过来了，它会走 controller.jsp，但是 springboot 默认是不支持 jsp 的，然而这个 jsp 它是指向 config.json 的，打开 config.json，第一个就是图片上传的相关配置：

所以就是 springboot 它无法访问 controller.jsp，也就无法读到 config.json 里的相关配置，所以报错。

解决办法：

思路：既然 springboot 无法通过 jsp 访问到 config.json，那就不走 jsp，直接让它获得 config.json 里的配置。

1.新建一个Controller，内容如下：

/*** 上传配置：即不走config.json，模拟config.json里的内容，解决后端配置项不正确，无法上传的问题* @return*/@RequestMapping("/ueditor/config")@ResponseBodypublic String uploadConfig() {String s = "{\n" +" \"imageActionName\": \"uploadimage\",\n" +"\"imageFieldName\": \"upfile\", \n" +"\"imageMaxSize\": 2048000, \n" +"\"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], \n" +"\"imageCompressEnable\": true, \n" +"\"imageCompressBorder\": 1600, \n" +"\"imageInsertAlign\": \"none\", \n" +"\"imageUrlPrefix\": \"\",\n" +"\"imagePathFormat\": \"/upload/images/{yyyy}{mm}{dd}/{filename}\" }";return s;}

2.修改 ueditor.config.js 里的 serverUrl 为上面定义的 url

3.因为SpringBoot项目是以jar打包的，我希望将文件上传到项目目录中，因此我新建一个SSM项目（fileUploadServer）作为文件上传服务器，即实现跨服务器文件上传

创建文件服务器流程：

新建一个maven项目，选择web骨架创建：

项目创建好后，不需要做任何配置，只需配置tomcat启动即可

启动文件服务器，在浏览器访问：

4.接下来在配置编辑器的页面配置一下上传：

// 手动指定上传文件调用的接口（不同文件类型不同接口）UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;UE.Editor.prototype.getActionUrl = function(action) {// 这里很重要，很重要，很重要，要和配置中的imageActionName值一样if(action == 'uploadimage'){// 这里调用后端我们写的图片上传接口return '/ueditor/upload';}else if(action == 'uploadfile'){return '/ueditor/upload';}else{return this._bkGetActionUrl.call(this, action);}};

即：

<script type="text/javascript">/*实例化编辑器 */var um = UE.getEditor('editor');// 手动指定上传文件调用的接口（不同文件类型不同接口）UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;UE.Editor.prototype.getActionUrl = function(action) {// 这里很重要，很重要，很重要，要和配置中的imageActionName值一样if(action == "uploadimage"){// 这里调用后端我们写的图片上传接口return "/ueditor/upload";}else if(action == "uploadfile"){return "/ueditor/upload";}else{return this._bkGetActionUrl.call(this, action);}};</script>

5.后端定义图片上传接口（使用ueditor自带的上传是不现实的）

import com.sky.mons.BaseController;import com.sun.jersey.api.client.Client;import com.sun.jersey.api.client.WebResource;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.MultipartFile;import javax.servlet.http.HttpServletRequest;import java.io.IOException;import java.util.Calendar;import java.util.HashMap;import java.util.Map;import java.util.Random;@Controllerpublic class UploadController {@PostMapping("/ueditor/upload")@ResponseBodypublic Map<String,String> uploadImage(MultipartFile upfile, HttpServletRequest request){String originalName = upfile.getOriginalFilename();String fileSuffix = originalName.substring(originalName.lastIndexOf("."));//生成新文件名Calendar now = Calendar.getInstance();int year = now.get(Calendar.YEAR);int month = now.get(Calendar.MONTH) + 1;int day = now.get(Calendar.DAY_OF_MONTH);int hour = now.get(Calendar.HOUR_OF_DAY);int minute = now.get(Calendar.MINUTE);int second = now.get(Calendar.SECOND);Random random = new Random();String newName = ""+year+month+day+hour+minute+second+random.nextInt(100) + fileSuffix;//文件存放路径String path = &quothttp://localhost/upload/images/" //这里就是我们刚刚创建的文件服务器 // 创建客户端的对象Client client = Client.create();//和图片服务器进行连接String url = path + newName;WebResource webResource = client.resource(url);// 上传文件try {webResource.put(upfile.getBytes());} catch (IOException e) {e.printStackTrace();}Map<String,String> result = new HashMap<>();result.put("state","SUCCESS");result.put("url",url);result.put("title",newName);result.put("original",newName);return result;}}

接下来编辑器就可以上传图片啦，还有一些上传视频，音乐的功能也可以类似的编写后台接口来实现。

存在的问题：

这样实现的跨服务器文件上传是不安全的，因为文件服务器没有任何权限限制，只要知道服务器地址即可无限制地上传文件，因此这个问题有待解决，后续我将花时间继续研究。