最近项目需要，需要在发布通知时使用富文本编辑器，由于以前使用过jsp版的百度ueditor，所以就继续选择了ueditor富文本编辑器，由于使用thymeleaf模板不再支持jsp页面，因此走了不少坑，所以写下此博文记录，如果更好的方案，请指点：
1.首先下载百度ueditor jsp版本代码：https://ueditor.baidu.com/website/download.html
2.下载后解压并将ueditor复制到 src/main/resources/static根目录下，如图
3.将ueditor下的index.html复制到 src/main/resources/templates根目录下作为测试案例，如图：
并更改相应的js文件css文件的引用路径如下：
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>- 6 创建Ueditor对象
package com.so.demosboot.common.ueditor;
public class Ueditor {
private String state;
private String url;
private String title;
private String original;
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getOriginal() {
return original;
}
public void setOriginal(String original) {
this.original = original;
}
}
创建PublicMsg 对象
package com.so.demosboot.common.ueditor;
public class PublicMsg {
public final static String UEDITOR_CONFIG = "{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": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",n" +
"n" +
" "scrawlActionName": "uploadscrawl",n" +
" "scrawlFieldName": "upfile",n" +
" "scrawlPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",n" +
" "scrawlMaxSize": 2048000,n" +
" "scrawlUrlPrefix": "",n" +
" "scrawlInsertAlign": "none",n" +
"n" +
" "snapscreenActionName": "uploadimage",n" +
" "snapscreenPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",n" +
" "snapscreenUrlPrefix": "",n" +
" "snapscreenInsertAlign": "none",n" +
"n" +
" "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],n" +
" "catcherActionName": "catchimage",n" +
" "catcherFieldName": "source",n" +
" "catcherPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",n" +
" "catcherUrlPrefix": "",n" +
" "catcherMaxSize": 2048000,n" +
" "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],n" +
"n" +
" "videoActionName": "uploadvideo",n" +
" "videoFieldName": "upfile",n" +
" "videoPathFormat": "/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}",n" +
" "videoUrlPrefix": "",n" +
" "videoMaxSize": 102400000,n" +
" "videoAllowFiles": [n" +
" ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",n" +
" ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"],n" +
"n" +
" "fileActionName": "uploadfile",n" +
" "fileFieldName": "upfile",n" +
" "filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}",n" +
" "fileUrlPrefix": "",n" +
" "fileMaxSize": 51200000,n" +
" "fileAllowFiles": [n" +
" ".png", ".jpg", ".jpeg", ".gif", ".bmp",n" +
" ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",n" +
" ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",n" +
" ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",n" +
" ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"n" +
" ],n" +
"n" +
" "imageManagerActionName": "listimage",n" +
" "imageManagerListPath": "/ueditor/jsp/upload/image/",n" +
" "imageManagerListSize": 20,n" +
" "imageManagerUrlPrefix": "",n" +
" "imageManagerInsertAlign": "none",n" +
" "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],n" +
"n" +
" "fileManagerActionName": "listfile",n" +
" "fileManagerListPath": "/ueditor/jsp/upload/file/",n" +
" "fileManagerUrlPrefix": "",n" +
" "fileManagerListSize": 20,n" +
" "fileManagerAllowFiles": [n" +
" ".png", ".jpg", ".jpeg", ".gif", ".bmp",n" +
" ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",n" +
" ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",n" +
" ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",n" +
" ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"n" +
" ] n" +
"n" +
"}";
/**
* Ueditor的返回状态类型
*/
public enum UeditorMsg{
SUCCESS("SUCCESS"),ERROR("上传失败");
private String v;
UeditorMsg(String v){
this.v =v;
}
public String get(){
return this.v;
}
}
}
新建ueditor文件上传处理控制类
package com.so.demosboot.common.ueditor;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
import com.alibaba.fastjson.JSONObject;
import com.so.demosboot.modules.share.entity.Items;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.*;
/**
* Created by DEMOCXY on 2018-01-09.
*/
@RestController
@RequestMapping(value = "/ueUploadController")
public class UeUploadController {
private String baseUrl ="H:/project";// 拿到配置文件配置的路径
/**
* 获取json字符串 代替jsp文件配置
* @param request
* @return
*/
@RequestMapping(value="/ueditor")
public String ueditor(HttpServletRequest request) {
return PublicMsg.UEDITOR_CONFIG;
}
/**
* 跳转到测试案例页面
* @param items
* @param model
* @return
*/
@RequestMapping(value = "index")
public String ue(Items items, Model model) {
return "index";
}
/**
* 自定义文件上传方法
*
* @return
* @throws IOException
*/
@RequestMapping(value = "/upload")
public Map<String, Object> upPic(@RequestParam(value = "upfile", required = false) MultipartFile pic,
String type,HttpServletRequest request, HttpServletResponse response) throws IOException {
String saveUrl = "/upload/2019sharegoods";//文件保存路径前缀 必须包含upload
if (type!=null && type !="") {
if (type.startsWith("image")) {
saveUrl += "/image/" + new SimpleDateFormat("yyyyMMdd").format(new Date()) + "/";
}else if (type.startsWith("video")) {
saveUrl += "/video/" + new SimpleDateFormat("yyyyMMdd").format(new Date()) + "/";
}else{
saveUrl += "/file/" + new SimpleDateFormat("yyyyMMdd").format(new Date()) + "/";
}
} else {
saveUrl += "/" + new SimpleDateFormat("yyyyMMdd").format(new Date()) + "/";
}
JSONObject json = new JSONObject();
try {
String fileName = pic.getOriginalFilename();
String oldName = fileName;
String fileType = fileName.substring(fileName.indexOf(".") + 1);
// 生成随机字符串名，防止出现中文乱码的情况
fileName = getRandomString(15) + "." + fileType;
File dest = new File(baseUrl + saveUrl + "/" + fileName);
if (!dest.getParentFile().exists()) { // 判断文件父目录是否存在
dest.getParentFile().mkdirs();
}
pic.transferTo(dest); // 保存文件
//按照相应的json数据格式返回结果
json.put("state", "SUCCESS");
json.put("title", oldName);
json.put("url", saveUrl + fileName);// 图片访问 相对路径
json.put("original", pic.getName());
} catch (Exception e) {
json.put("state", "ERROR");
e.printStackTrace();
}
//System.out.println(json.toString());
response.getWriter().print(json.toString());
return null;
}
/**
* @Title: getRandomString
* @Description: 随机生成字符串
* @param @param
* length 字符串长度
* @return String
* @date createTime：2018年4月9日下午1:45:52
*/
public static String getRandomString(int length) {
// 产生随机数
Random random = new Random();
StringBuffer sb = new StringBuffer();
// 循环length次
for (int i = 0; i < length; i++) {
// 产生0-2个随机数，既与a-z，A-Z，0-9三种可能
int number = random.nextInt(3);
long result = 0;
switch (number) {
// 如果number产生的是数字0；
case 0:
// 产生A-Z的ASCII码
result = Math.round(Math.random() * 25 + 65);
// 将ASCII码转换成字符
sb.append(String.valueOf((char) result));
break;
case 1:
// 产生a-z的ASCII码
result = Math.round(Math.random() * 25 + 97);
sb.append(String.valueOf((char) result));
break;
case 2:
// 产生0-9的数字
sb.append(String.valueOf(new Random().nextInt(10)));
break;
}
}
return sb.toString();
}
}
修改ueditor.config.js serverUrl路径
html界面添加自定义文件上传方法配置：
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'listimage') {
return '/ueUploadController/upload?type=image';
}if(action == 'uploadvideo'){
return '/ueUploadController/upload?type=video';
}if(action == 'uploadfile'){
return '/ueUploadController/upload?type=video';
} else {
return this._bkGetActionUrl.call(this, action);
}
} 最后配置虚拟路径（因为自定义文件上传 我把文件上传到了H：/project/upload/2019sharegoods/**.png下面）
保存在数据库的路径是/upload/2019sharegoods/**.png
所以虚拟 路径配置代码如下
@Configuration
public class WebConfig implements WebMvcConfigurer {
// 这个方法是用来配置静态资源的，比如html，js，css，等等
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/upload/**").addResourceLocations("file:/H:/project/upload/");
}
}至此 所有步骤已经完全实现，是不是感觉少了点什么？？？
没错，至始至终我们都没有使用到下载源码里面的java代码，也没有引入jsp文件下的lib包，因为我们使用的是自定义文件上传路径，上传方法是自己写的，所以无需使用，不用质疑。
UEditor文档 http://fex.baidu.com/ueditor/
springboot+thymeleaf集成百度Ueditor并自定义上传文件路径
