Java集成UEditor的时候真的是各种坑,之前没有用过这个编辑器,也不知道怎么配置,
一路的爬坑终于能上传图片,唉。。
上传的时候总是提示 后端配置项没有正常加载等等的东西,是真的烦,按着网上的教程也没搞定,只能慢慢爬坑。 开始配置:
最快的一种配置是:
首先去官网:http://ueditor.baidu.com/website/download.html
下载一个源码包、一个JSP的开发包。
我这里项目是SSM+MAVEN。
把JSP的包解压扔到项目里,确认能够读取的到,我这里跟JSP页面放在一起了。
然后解压源码包,在JSP文件夹底下有个src,熟悉不?里边是java的后台代码, copy下,扔到项目里。像这样的
然后找到ueditor下jsp里的lib,里边的jar包 Build Path 下。
然后打开config.json 配置文件
**需要改的只有 “imageUrlPrefix”、“imagePathFormat”,
imageUrlPrefix:对应你的项目名,如:http://localhost:8080/Project
imagePathFormat: 不修改**
然后写个JSP页面加载编辑器!
引入JS文件 、必须先加载配置文件,顺序不能反了
<script type="text/javascript" src="${ctx}/jsp/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="${ctx}/jsp/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="${ctx}/jsp/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="${ctx}/jsp/ueditor/ueditor.parse.min.js"></script>
<div class="layui-form-item">
<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
<script type="text/javascript">
var ue = UE.getEditor('editor'); //初始化编辑器
</script>
</div>
最后效果,单图、多图上传
这是默认的配置,文件上传到项目下,就是你一重启项目就没了,哈哈哈,改吧,改成上传到指定磁盘路径。
首先写一个controller,网上有很多自定义上传路径的,很乱也没怎么懂,最后找到这个文章https://blog.csdn.net/slyn_2004/article/details/53868547 一看就懂了,非常感谢这位博主。
controller代码如下:
UeditorController.java
package com.ys.controller;
import java.io.File;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import com.ys.utils.ToolsUtils;
/**
* @Title UeditorController.java
* @description: 百度编辑器入口controller
* @time 创建时间:2018年4月8日 下午4:52:45
**/
@Controller
@RequestMapping(value = "/ueditor")
public class UeditorController {
/**
* @Title: uploadUEditorImage
* @Description: 自定义编辑器上传路径
* @param @param file
* @param @param response
* @param @param request
* @param @throws Exception
* @return void
* @date createTime:2018年4月9日下午1:52:19
*/
@RequestMapping(value = "/ueditorUpload")
public void ueditorUpload(@RequestParam(value = "upfile", required = false) MultipartFile file,
HttpServletResponse response, HttpServletRequest request) throws Exception {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
JSONObject json = new JSONObject();
PrintWriter out = response.getWriter();
try {
//要上传的磁盘路径
String rootPath = "D:/uploadFile";
//文件名
String fileName = file.getOriginalFilename();
//截取文件类型
String fileType = fileName.substring(fileName.indexOf(".") + 1);
//创建以日期为名字的文件夹
String dateFolder = "/" + new SimpleDateFormat("yyyyMMdd").format(new Date()) + "/";
//拼接文件的相对路径
String path = dateFolder + ToolsUtils.getRandomString(15) + "." + fileType;
//创建文件夹
new File(rootPath + dateFolder).mkdir();
//写入文件
file.transferTo(new File(rootPath + path));
json.put("state", "SUCCESS");
json.put("title", file.getName());
json.put("url", path);// 图片访问 相对路径
json.put("original", file.getName());
} catch (Exception e) {
json.put("state", "ERROR");
throw new Exception("上传文件失败!");
}
out.print(json.toString());
}
}
随机生成字符串工具类,用UUID也是可以的
/**
* @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();
}
文件的路径别搞错了 ,路径要匹配config.json配置文件的“imagePathFormat”路径。
“/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}”原路径是包文件JSP下的upload/image/日期文件夹/时间+字符串
这里是上传到了D:/uploadFile/{yyyy}{mm}{dd}/{rand:15},
修改config.json文件
修改”imageUrlPrefix”为 “”,
修改“imagePathFormat”为 “{yyyy}{mm}{dd}/{rand:15}”
打开使用编辑器的jsp页面 更换加载方式为
<script type="text/javascript">
//覆盖UEditor中获取路径的方法
var ue = UE.getEditor('editor');
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'listimage') {
return 'ueditor/ueditorUpload';
} else {
return this._bkGetActionUrl.call(this, action);
}
}
</script>
这时候上传会发现
因为这里是上传到了磁盘,而不是在项目下 ,需要配置虚拟路径
配置tomcat,打开server.xml
在最后的 Host 标签里添加
<Context docBase="D:/uploadFile" path="" reloadable="true"/>
然后上传成功
若是还是报错 提示 配置项错误 未加载什么的 ,确定导入的编辑器文件能读取,要不换个地方,要不配置不拦截静态资源 。