springboot+vue整合百度的Ueditor

前言
最近应上级要求，添加一个富文本编辑器，百度的Ueditor（主角来了）；划重点2016年就停更了！
废话不多说，直接开始操作吧。
！！！建议看的时候仔细一点，因为很可能遗漏了某个地方就很抓狂！！！
相信你看完肯定会有收获的
1、先去GitHub官网上下载Ueditor(点这里)

下载完成之后解压出来，一会要复制文件的

注意:我这里直接开始导入操作，默认你会maven,vue,并且会使用IDEA工具
2、再下载一个jsp版本（我是用java写得）
此处也可以不下载，但是怕有童鞋整不明白，所以还是多下一个吧
第一个zip是整个源码，第二个是分离出来的，后面会涉及到修改源码
点我下载

3、复制文件
1、将ueditor1_4_3_3-utf8-jsp中的文件全部复制到 vue 项目的static目录或者public目录的 ueditor 文件夹下（自行创建），效果如图：

注：我的jsp文件夹已经删了，后面都移走了
2、将这个路径下ueditor-1.4.3.3\jsp\src\com\baidu\ueditor中的文件全部复制到 springboot 工程当中
如图：

3、引入maven
将下面这4个jar包引入工程中

注：因为我们上面引入了源码，所以第5个jar包就不需要引入
commons-fileuploadcommons-fileuploadcommons-iocommons-iocommons-codeccommons-codecorg.jsonjson1.0.0
这里上面 3 个可以直接通过 maven 引入，第 4 个可能会有问题(没问题的略过~)
笔者这里是通过 mvn 命令引入的，如下：
mvn install:install-file -Dfile=D:\DEV\work\erp_server_v4\src\web\WEB-INF\lib\proxool-0.9.1.jar -DgroupId=proxool -DartifactId=proxool -Dversion=0.9.1 -Dpackaging=jar

4、编写 Ueditor 组件
创建组件引入下面的 css 和 js 文件

注：注意红色的框，引入的是 ueditor.all.js,别问为什么，血泪史~~
压缩之后会有莫名其妙的问题，还是别用的好
还需要注意文件引用的路径，根据自己的项目结构而定
功能和参数都是因地制宜的，难度不大。下面直接附上源码：

这里提一嘴，创建每一个ueditor实例时一定要有不同的id，不然在同一个组件无法多次使用（害，该踩的坑让我来，一个都不少~）
5、写好另一个父组件引用我们刚刚完成的Ueditor组件
这里不具体实现，朋友们自己动手啦~
此时成功的显示出来即可，注意还不能上传图像

6、(重点)开始配置图像上传功能
1、将 ueditor1_4_3_3-utf8-jsp/jsp 文件夹下的 config.json 文件复制到 springboot 项目下的 resources 文件夹下
2、在后台编写 UEditorController 来代替 controller.jsp 文件
@RestController
public class UEditorController {@RequestMapping(“/config”)public String exec(HttpServletRequest request,HttpServletResponse response,@RequestParam(value = “action”) String action) throws Exception {request.setCharacterEncoding(“utf-8”);response.setContentType(“text/html”);String rootPath = request.getSession().getServletContext().getRealPath(“/”);return new ActionEnter(request, rootPath).exec();}
}
解释：
controller.jsp 这个文件主要是用来获取 config.json 中的内容，并返回过去，因为富文本编辑器在初始化时会调接口来访问这个文件中的内容
所以你在baidu的时候会发现有很多不一样的版本，没关系，目的都一样
这里我们获取的路径还会有问题，因此我们还有修改源码
修改一：修改 ConfigManager.java 文件中的 getConfigPath() 方法
private String getConfigPath () {
// return this.parentPath + File.separator + ConfigManager.configFileName;// 修改源码try{return this.getClass().getClassLoader().getResource(“config.json”).toURI().getPath();} catch (URISyntaxException e) {e.printStackTrace();return null;}}
修改二:修改 BinaryUploader.java 文件中的 save() 方法（删除或注释掉）
public static final State save(HttpServletRequest request,Map<String, Object> conf) {if (!ServletFileUpload.isMultipartContent(request)) {return new BaseState(false, AppInfo.NOT_MULTIPART_CONTENT);}try {MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;MultipartFile multipartFile = multipartRequest.getFile(conf.get(“fieldName”).toString());if (multipartFile == null) {return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);}String savePath = (String) conf.get(“savePath”);String originFileName = multipartFile.getOriginalFilename();String suffix = FileType.getSuffixByFilename(originFileName);originFileName = originFileName.substring(0,originFileName.length() - suffix.length());savePath = savePath + suffix;long maxSize = ((Long) conf.get(“maxSize”)).longValue();if (!validType(suffix, (String[]) conf.get(“allowFiles”))) {return new BaseState(false, AppInfo.NOT_ALLOW_FILE_TYPE);}savePath = PathFormat.parse(savePath, originFileName);String physicalPath = (String) conf.get(“rootPath”) + savePath;InputStream is = multipartFile.getInputStream();State storageState = StorageManager.saveFileByInputStream(is,physicalPath, maxSize);is.close();if (storageState.isSuccess()) {storageState.putInfo(“url”, PathFormat.format(savePath));storageState.putInfo(“type”, suffix);storageState.putInfo(“original”, originFileName + suffix);}return storageState;} catch (IOException e) {}return new BaseState(false, AppInfo.IO_ERROR);}
到这里启动工程访问http://localhost:8080/config?action=config应该能正常返回 config.json 中的内容了
如果访问不能正常返回的话，注意路径问题，
或者未知原因也有，其实里面bug挺多的，界面也过时了，但是耐不住人家功能强大…
修改三：修改 ueditor.all.js 文件
var configUrl = me.getActionUrl(‘config’),// isJsonp = utils.isCrossDomainUrl(configUrl);isJsonp = false;
ctrl+f 找到并注释掉它，再补上 isJsonp = false;
注意：
使用了security的童鞋要放开链接访问权限和相关的文件（资源）访问权限（如png，jpg等等）
这一点对后面的测试也很重要，能少走很多弯路！！！
7、修改配置文件
1、修改 config.json 文件

也就是说再上传成功后，会调用 http://localhost:8081/image/upload/ueditor/{time}/{filename} 来显示在文本框里面
没理解也不要紧，接着往下看，后面实践了就恍然大悟了
2、修改 ueditor.config.js 文件

再把controller放过来对照
@RestController
public class UEditorController {@RequestMapping(“/config”) //看这里！！！public String exec(HttpServletRequest request,HttpServletResponse response,@RequestParam(value = “action”) String action) throws Exception {request.setCharacterEncoding(“utf-8”);response.setContentType(“text/html”);String rootPath = request.getSession().getServletContext().getRealPath(“/”);return new ActionEnter(request, rootPath).exec();}
}
这里就是编辑器初始化时，向服务器发送请求读取 config.json 文件的配置
3、编写上传文件的controller

放在这里方便你拷贝~
@Autowiredprivate UEditorUpload uEditorUpload;@RequestMapping(“/config”)public String exec(HttpServletRequest request,HttpServletResponse response,@RequestParam(value = “action”) String action,@RequestParam(value = “upfile”, required = false) MultipartFile upfile) throws Exception {if (action.equals(“config”)) {request.setCharacterEncoding(“utf-8”);response.setContentType(“text/html”);String rootPath = request.getSession().getServletContext().getRealPath(“/”);return new ActionEnter(request, rootPath).exec();} else if (action.equals(“uploadimage”)) {UEditorFile uEditorFile = uEditorUpload.uploadImage(upfile);JSONObject jsonObject = new JSONObject(uEditorFile);return jsonObject.toString();}return “无效Action”;}
4、补充注入方法和返回结果封装类（没错，不返回指定参数是用不了的！！)具体情况请看官网要求。
新建 UEditorUpload.java 源码如下：
（相信看到这里的朋友，有能力自己分析方法实现了上面，我偷懒去了）
private Logger log = LoggerFactory.getLogger(UEditorUpload.class);private String path = ClassUtils.getDefaultClassLoader().getResource(“”).getPath();public UEditorFile uploadImage(MultipartFile file) throws IOException {log.info(“UEditor开始上传文件”);String fileName = file.getOriginalFilename(); //获取文件名//Ueditor的config.json规定的返回路径格式String returnPath = “/image/upload/ueditor/”+new Date().getTime()+“/”+fileName;File saveFile = new File(path+“static”+returnPath);if (!saveFile.exists()){saveFile.mkdirs();}file.transferTo(saveFile); //将临时文件移动到保存路径log.info(“UEditor上传文件成功，保存路径：”+saveFile.getAbsolutePath());UEditorFile uEditorFile = new UEditorFile();uEditorFile.setState(“SUCCESS”);uEditorFile.setUrl(returnPath); //访问URLuEditorFile.setTitle(fileName);uEditorFile.setOriginal(fileName);return uEditorFile;}
String path = ClassUtils.getDefaultClassLoader().getResource(“”).getPath();
这是引用spring中的工具类来获取地址，有兴趣的话可以试试
getClass().getClassLoader().getResource(“文件”).toURI().getPath();

新建 UEditorFile.java 这个文件主要是按照上传文件返回格式而创建的，源码如下：
@Data
@NoArgsConstructor
@Accessors(chain = true)
public class UEditorFile {private static final long serialVersionUID=1L;private String state;private String url;private String title;private String original;@Overridepublic String toString() {return “{” +“state='” + state + ‘’’ +“, url='” + url + ‘’’ +“, title='” + title + ‘’’ +“, original='” + original + ‘’’ +‘}’;}
}
整理到这里就可以去启动整个工程项目了
7、启动测试
ok的话就很nice，说明你成功了！
下面我总结一下我遇到的及其解决办法，由于已经写完了，错误截图就没有，后面找时间补上（求放过~）
1、读取不到 config.json 文件
1、检查读取路径是否正确，这个得自己一步步debug了
2、直接访问时记得带上参数action。。。（虽然时笨笨的问题，但是我发生了）
3、放开地址访问权限
4、检查文件是否被过滤
2、跨域问题可自行百度，方案挺多的
3、控制台显示http请求错误
1、认真检查配置文件路径
2、测试后端接口带上参数看看有没有问题
3、2中可以的话，看看vue组件是不是用的 ueditor.all.min.js，改成 ueditor.all.js，（我就是这里离谱的问题！！！，估计时压缩后的问题）
4、能选择图片，（多图上传按钮下）点击上传后，后端能拿到数据，也存下来图片，但是编辑器显示http错误 或者 服务器端错误
1、检查路径…（没错，还是检查路径）
2、返回的数据类型要是 string 类型的，或者说要 json 的字符串
3、返回的字符串没按照官网要求，具体可以翻上面，我将了
5、上传成功了，但是编辑器不能正常显示
我这里报的是跨域的错，但是其实不是的，这种情况还有很多，前面也出现了！！！
我把静态文件访问路径放开就能正常回显了

参考文章：http://blog.ncmem.com/wordpress/2023/09/13/springbootvue%e6%95%b4%e5%90%88%e7%99%be%e5%ba%a6%e7%9a%84ueditor/
欢迎入群一起讨论