项目搭建
新建一个 springboot 项目，我这里的 springboot 版本依赖是:
<parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.2.5.RELEASE</version><relativePath/></parent>
web 依赖是 :
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency>
从 ueditor 官网 : http://ueditor.baidu.com/website/download.html 下载相关包 :
然后把下载的 zip 解压到一个本地目录，我这里解压到 C:\Users\asus\Desktop\tool-demo\ueditor\web\ueditor :
由于 ueditor jsp 版本需要 commons-codec、commons-fileupload、commons-io、json、ueditor 五个 jar 包，前四个 jar 包可以在 maven 中找到，但是最后一个在 maven 中是没有的，在项目根目录新建 lib 包，把 ueditor-1.1.2.jar 复制到 lib 目录，然后在 maven 中引入这五个 jar 包的依赖 :
<!-- ueditor jsp 需要的 jar 包 --><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>org.json</groupId><artifactId>json</artifactId><version>20190722</version></dependency><dependency><groupId>com.baidu</groupId><artifactId>ueditor</artifactId><version>1.1.2</version><scope>system</scope><systemPath>${basedir}/lib/ueditor-1.1.2.jar</systemPath></dependency><!-- ueditor jsp 需要的 jar 包 -->
在 application.yml 中配置端口、项目名、静态文件等信息:
server:port: 8001servlet:context-path: /myUeditor
spring:# 使用外部静态资源文件, 不用把静态资源打到 jar 包中运行mvc:# 访问路径static-path-pattern: /myHtml/**resources:# 把那些位置的静态资源文件加载到容器中 # 最后以斜杠结尾static-locations: file:C:/Users/asus/Desktop/tool-demo/ueditor/web/,classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/com:xh:ueditor:config:# ueditor config.json 所在目录path: C:\Users\asus\Desktop\tool-demo\ueditor\web\ueditor\jspimage:path:# 图片保存地址前面部分(除去 springboot 静态文件部分)base: C:\Users\asus\Desktop\tool-demo\ueditor\web\# 访问该 url 的后缀url: /ueditor/image
按照 ueditor 官网文档 : http://fex.baidu.com/ueditor/ 搭建一个简单的富文本编辑器页面 index.html :
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ueditor</title>
</head>
<body><div>h1
</div><!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">这里写你的初始化内容 </script><div>h2
</div><!-- 配置文件 -->
<script type="text/javascript" src="./ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="./ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">var ue = UE.getEditor('container', {
toolbars: [['fullscreen', 'source', 'undo', 'redo', 'bold','italic', //斜体'underline', //下划线'strikethrough', //删除线'simpleupload', //单图上传'forecolor', //字体颜色'insertorderedlist', //有序列表'insertunorderedlist' //无序列表]],autoHeightEnabled: true,autoFloatEnabled: true});// //对编辑器的操作最好在编辑器ready之后再做// ue.ready(function () {
// //设置编辑器的内容// ue.setContent('hello');// //获取html内容，返回: <p>hello</p>// var html = ue.getContent();// //获取纯文本内容，返回: hello// var txt = ue.getContentTxt();// }); </script></body>
</html>
启动 springboot 项目，通过 http://127.0.0.1:8001/myUeditor/myHtml/index.html 访问富文本编辑器。
实现图片上传
按照上面的步骤访问项目富文本编辑器页面时，在浏览器控制台会出现一个错误:
出现该错误就表示不能上传图片，要想实现自定上传图片功能需要一些自定义配置。
主要参照 :
- http://fex.baidu.com/ueditor/#start-config
- http://fex.baidu.com/ueditor/#server-config
具体步骤 :
- 在后台新建一个 controller, 代码如下 :
import com.baidu.ueditor.ActionEnter;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;import javax.servlet.http.HttpServletRequest;
import java.io.*;
import java.time.LocalDate;
import java.time.format.DateTimeFormatter;
import java.util.HashMap;
import java.util.Map;
import java.util.UUID;/*** UeditorController** @author xh* @date 2020/7/21*/
@RestController
public class UeditorController {/*** configPath 为 ueditor jsp 中 config.json 所有在配置文件路径。*/@Value("${com.xh.ueditor.config.path}")private String configPath;/*** 图片保存地址前面部分(除去 springboot 静态文件部分)*/@Value("${com.xh.ueditor.image.path.base}")private String baseImagePath;/*** 访问该 url 的后缀* 即可以通过 http://ip:port/projectName/urlImagePath/../xx.jpg 访问图片* 在 ueditor 中也是通过这个 ip 来访问图片的*/@Value("${com.xh.ueditor.image.path.url}")private String urlImagePath;@ResponseBody@RequestMapping("/config")public Object config(HttpServletRequest request) {String action = request.getParameter("action");// 处理初始化加载配置文件if ("config".equals(action)) {return new ActionEnter(request, this.configPath).exec();}// 处理上传文件 -- 这里的 uploadimage 对应 ueditor/jsp/config.json 中的 imageActionNameif ("uploadimage".equals(action)) {MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request;// 这里的 upfile 对应 ueditor/jsp/config.json 中的 imageFieldNameMultipartFile multipartFile = multipartHttpServletRequest.getFile("upfile");String dateStr = LocalDate.now().format(DateTimeFormatter.ofPattern("yyyyMMdd"));if (multipartFile == null) {return null;}// 图片名称String imgName = multipartFile.getOriginalFilename() == null || multipartFile.getOriginalFilename().trim().length() == 0 ? "fileName" : multipartFile.getOriginalFilename();// 后缀String fileSuffix = imgName.substring(imgName.indexOf("."));// {time}{rand:6}String uuid = System.currentTimeMillis() + UUID.randomUUID().toString().replace("-", "").substring(0, 6);// 文件相对路径String relativePathFileName = this.urlImagePath + File.separator + dateStr + File.separator + uuid + fileSuffix;// 绝对路径String absolutePathFileName = this.baseImagePath + File.separator + relativePathFileName;File file = new File(absolutePathFileName);if (!file.getParentFile().exists()) {// 生成文件父目录//noinspection ResultOfMethodCallIgnoredfile.getParentFile().mkdirs();}try {// 保存到磁盘multipartFile.transferTo(file);} catch (IOException e) {return null;}// 封装返回值Map<String, Object> map = new HashMap<>();// original - 对应 img 标签中的 alt 属性,代替图片的文字map.put("original", imgName);// url - 对应 img 标签中的 src 和 _src 属性，`src = imageUrlPrefix + url` imageUrlPrefix 在前端配置为 : http://ip:port/projectName// windows 下 url 中的 File.separator 是 \ ==> 有可能导致 ueditor 解析 json 出错map.put("url", relativePathFileName.replaceAll("\\\\", "/"));// title - 对应 img 标签中的 title 属性，表示鼠标移动到图片上显示什么什么map.put("title", imgName);// state 必须为 SUCCESS, 不然生成图片会失败map.put("state", "SUCCESS");return map;}return null;}}
修改 ueditor 配置，使其初始化时使用 前面那个 controller 返回的 json，这步的作用是去掉前面浏览器控制台出现的错误。
ueditor 默认的 serverUrl 是这样的 :
其默认访问的是 ueditor/jsp 目录下 的 controller.jsp。把它修改为访问刚刚那个 controller 中 config 接口，即修改为 : http://127.0.0.1:8001/myUeditor/config
然后重启项目就发现没有前面浏览器中的那个错误了。
但是这时候上传图片会出现上传失败，本地保存成功弹窗。
打开 ueditor.all.js，搜索关键字 simpleupload.loading，如下:
然后在图中准备 debugger 位置加入处理代码后如下：
function callback(){try{var link, json, loader,body = (iframe.contentDocument || iframe.contentWindow.document).body,result = body.innerText || body.textContent || '';console.log(result)console.log(result.substring(result.indexOf('{')))debugger// json = (new Function("return " + result))();json = JSON.parse(result.substring(result.indexOf('{')));link = me.options.imageUrlPrefix + json.url;if(json.state == 'SUCCESS' && json.url) {loader = me.document.getElementById(loadingId);loader.setAttribute('src', link);loader.setAttribute('_src', link);// title - 对应 img 标签中的 title 属性，表示鼠标移动到图片上显示什么loader.setAttribute('title', json.title || '');// original - 对应 img 标签中的 alt 属性,代替图片的文字loader.setAttribute('alt', json.original || '');loader.removeAttribute('id');domUtils.removeClasses(loader, 'loadingclass');} else {showErrorLoader && showErrorLoader(json.state);}}catch(er){console.log(er)showErrorLoader && showErrorLoader(me.getLang('simpleupload.loadError'));}form.reset();domUtils.un(iframe, 'load', callback);}
然后在 ueditor/jsp/config.json 中修改图片回显地址前缀配置:
"imageUrlPrefix": "http://127.0.0.1:8001/myUeditor/myHtml", /* 图片访问路径前缀 */
使得这里的前缀加上返回 json 中的 url 可以访问对应图片。
然后重启项目即可以上传图片了。