最近在做这个功能,不得不说,过程太艰辛了...
1、首先在官网下载对应的插件 【下载地址】
我的项目中选用的是JSP版本,选哪个看项目和个人选择,都大同小异的。
2、然后要找到相关的依赖,网上大多是下面这个依赖,但是一直下载不下来。
<dependency>
<groupId>com.blingblingbang</groupId>
<artifactId>ueditor</artifactId>
<version>1.1.2</version>
</dependency>
依赖导入不了怎么办?网上说直接导入jar包,就是刚才下载下来的那个,但是我们是maven项目,下面这个做法这样做不合理。
后来找到了这个依赖,跟百度的那个作用是一样的
<dependency>
<groupId>com.gitee.qdbp.thirdparty</groupId>
<artifactId>ueditor</artifactId>
<version>1.4.3.3</version>
</dependency>
这个依赖下载好之后,把刚才下载的文件中,除去lib中的jar包,然后参考这个文件路径放到自己项目中去。打包之后resource下面也会有一份,等后面后台去获取初始化配置的时候,可以直接访问resource下面的文件。
3、修改config.json文件配置,主要是后面图片上传到阿里云上,所以有自己的url,不用放在服务器上,那这个imageUrlPrefix就不用加上localhost:8080之类的前缀了。【这一块主要看各项目实际情况】其他的配置,就是看个人想法,可以拿他的参数值用,也可以改成自己喜欢的。这一块,修改webpack下面的那份文件就好,前端打包完,resource下面的文件也会相应改变的。
4、修改ueditor.config.js文件,主要是修改里面的接口路径,改成后端代码里面获取初始化配置的那个接口路径。
5、找到ueditor.reset.js文件,修改上传文件的接口,根据action的状态去判断,让这个接口指向上传阿里云的方法。
这个action就是后面等接口通了之后,根据不同的动作有不同的信息。比如说页面刚打开的时候调用接口获取ueditor的初始化配置,此时这个action的信息就是config。
6、配置的话基本改的都差不多了,现在来看后台的接口,首先是获取配置的接口。
import com.baidu.ueditor.ActionEnter;
import com.yscredit.mj.base.entity.Oss;
import com.yscredit.mj.base.entity.UeditorResult;
import com.yscredit.mj.base.response.WebResponse;
import com.yscredit.mj.config.OssConfig;
import com.yscredit.mj.service.OssService;
import com.yscredit.mj.util.JsonResourceUtil;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.util.*;
@Controller
@RequestMapping("ueditor/jsp")
public class UeditorController {
private static final Logger logger = LoggerFactory.getLogger(UeditorController.class);
@Autowired
private OssService ossService;
@RequestMapping("/getConfigJson")
public WebResponse getUeditorConfig(HttpServletRequest request, HttpServletResponse response) throws Exception {
String rootPath = this.getClass().getResource("/").getPath()+"plugins";
logger.info("rootpath============>"+rootPath);
try {
response.setContentType("application/json");
request.setCharacterEncoding("utf-8");
response.setHeader("Content-Type", "text/html");
ActionEnter actionEnter = new ActionEnter(request, rootPath);
String exec = actionEnter.exec();
logger.info("exec============>"+exec);
PrintWriter writer = response.getWriter();
writer.write(exec);
writer.flush();
writer.close();
} catch (IOException e) {
e.printStackTrace();
}
return WebResponse.resFail("操作失败",null);
}
}
因为我们这个接口是要去拿config.json里面的配置的,所以这个rootPath就要指向之前步骤1中下载好的文件存放的plugins下的路径。其他的代码就是网上参考的一样,可以不用修改。这个接口的url就是跟步骤3中一样。
调试之后,那如果在页面上可以看到以下返回的json格式的数据的话,那么说明接口是成功的。
但是,问题就来了,本地开发环境上传图片什么的都OK,但是到测试环境之后,这个config.json文件一直拿不到。就很难受....
然后怎么办呢,就想到这个getConfigJson接口不就是获取哪些配置信息的吗,那么我们直接拿出来这个config.json文件,然后把这个文件读出来再用json格式返回,也是一样的效果。
@RequestMapping("/getConfigJson")
@ResponseBody
public Object getConfigJson(HttpServletRequest request, HttpServletResponse response) throws Exception {
return JsonResourceUtil.getJsonObjFromResource("/template/config.json");
}
附上file转json的JsonResourceUtil的工具类代码
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import org.apache.log4j.Logger;
import org.springframework.core.io.ClassPathResource;
import org.springframework.core.io.Resource;
import java.io.BufferedReader;
import java.io.InputStream;
import java.io.InputStreamReader;
public class JsonResourceUtil {
private static Logger logger = Logger.getLogger(JsonResourceUtil.class);
private JsonResourceUtil() {
}
//filename 为文件名字 如 “/json/app_version_info.json”
public static JSONObject getJsonObjFromResource(String filename) {
JSONObject json = null;
if (!filename.contains(".json")) {
filename += ".json";
}
try {
Resource resource = new ClassPathResource(filename);
InputStream is = resource.getInputStream();
if (is != null) {
BufferedReader reader = new BufferedReader(new InputStreamReader(is)); // 实例化输入流,并获取网页代码
String s; // 依次循环,至到读的值为空
StringBuilder sb = new StringBuilder();
while ((s = reader.readLine()) != null) {
sb.append(s);
}
json = JSON.parseObject(sb.toString());
} else {
logger.info("file not exist!");
}
} catch (Exception e) {
e.printStackTrace();
logger.info("readFileToString" + e.getMessage());
}
return json;
}
}
其中有一个注意的地方,就是这里,用流去获取这个文件。
否则在测试环境中,会报以下错误...
java.io.FileNotFoundException:class path resource [template/config.json]
cannot be resolved to absolute file path because it does not reside in the file system:
jar:file:/home/XXXXX/tomcat/XXXX/XXXX.jar!/BOOT-INF/classes!/template/config.json
7、上面接口成功之后,就要接上传图片到阿里云的接口。跟步骤5中的方法对应。其中OSS配置,注意自己加上哈。
/**
* 上传图片
* @param file
* @return
*/
@RequestMapping(value = "uploadFile", method = RequestMethod.POST)
@ResponseBody
public UeditorResult uploadFile(@RequestParam("file") MultipartFile file ) {
UeditorResult result = new UeditorResult();
if (file != null) {
String fileType = "";
if (file.getOriginalFilename().indexOf(".") < 1) {
result.setState("FAIL");
return result;
} else {
fileType = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."), file.getOriginalFilename().length());
result.setType(fileType);
result.setSize(file.getSize());
result.setOriginal(file.getName());
}
String uuid = "hztl" + UUID.randomUUID().toString().replace("-", "") + fileType;
result.setTitle(uuid);
Oss oss = new Oss();
oss.setKey(uuid);
try {
oss.setValue(file.getBytes());
} catch (IOException e) {
logger.error("上传图片出错",e);
result.setState("FAIL");
return result;
}
List<Oss> list = new ArrayList<>();
list.add(oss);
ossService.uploadOssForSteam(list);
logger.info("上传图片的路径"+ OssConfig.ENTFILE_PDFACCESS);
result.setUrl(OssConfig.ENTFILE_PDFACCESS+uuid);
result.setState("SUCCESS");
return result;
}else {
result.setState("FAIL");
return result;
}
}
看到这有没有觉得这个接口的返回值很奇怪,用的是UeditorResult对象。
public class UeditorResult {
//上传图片的名称
String original;
//图片大小
Long size;
//上传图片的状态;
String state;
//上传后图片的名称
String title;
//上传图片的格式
String type;
//上传图片的url
String url;
public String getOriginal() {
return original;
}
public void setOriginal(String original) {
this.original = original;
}
public Long getSize() {
return size;
}
public void setSize(Long size) {
this.size = size;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
}
这个可以直接看请求的response的,按照它的返回格式来,可以省去很多麻烦,反正也不难写,对吧,hhhh~
基本上到这里就可以实现ueditor图片上传的功能啦。要做这些,很大原因是要去了解这个源码,一层一层的点进去,看他是要什么东西。最开始的那些config配置信息,都不知道哪里链接哪里的,就很难受。看懂了,其实也就了解差不多了。