前
在给拖拉机编写社区时需要用到富文本编辑，在这里我先列举部署流程，再写一些我遇到的坑
image
部署UEditor
使编辑器显示
直接上UEditor官网下载下载地址
将一个完整源码和一个JSP-utf8版下载下来。
image
打开完整源码的zip，进入/euditor-1.4.3.3/jsp/src/com/baidu，将整个ueditor放入你的项目编码中。
image
这是我放入后的目录。
image.png
查看index中的demo，将index.html看了一遍，发现需要将js的引用改成绝对路径。然后使用UE.getEditor('编辑器的id')，就可以创建指定id的编辑器。
image.png
image.png
下面就是使textarea创建一个编辑器。
<script>
contentEditor = UE.getEditor('content');
</script>
<body>
<textarea name="content" id="content" style="width:95%;height:300px;"></textarea>
</body>
编辑器上传图片后台设置
当做到这一步的时候，使用编辑器上传的时候会被提示后台配置错误。这个时候我们需要看一下刚刚从源码拉下来的配置项文件。
有一个Jsp的配置，但是我们是springboot项目，无法使用这个jsp进行配置。
image.png
需要设置一个控制器，我这里设置了一个UEditorConfig，并且根据这个controller.jsp写一个控制器，如下。
@RestController
@RequestMapping
public class UEditorConfig {
@RequestMapping("/UEditorConfig")
@ResponseBody
public void EDitorConfig(HttpServletRequest request, HttpServletResponse response){
response.setContentType("application/json");
String rootPath = this.getClass().getResource("/").getPath();
try{
String exec = new ActionEnter(request,rootPath).exec();
System.out.println(exec);
PrintWriter printWriter = response.getWriter();
printWriter.write(exec);
printWriter.flush();
printWriter.close();
}catch (Exception e){
e.printStackTrace();
}
}
}
这个时候运行程序，访问发现上传图片时会提示配置文件方式失败，然后我们进入ActionEnter分析一下。
image.png
发现是从resourse路径读取配置文件。这里我注释了下面会讲，这个在idea中运行是没错的，注释是在我发布到linux服务器的时候踩到的坑。大家可以先在调试中先运行起来。
image.png
所以我们现在知道是什么原因了，读取config.json的时候获取不到文件，将jsp下的config.json移动到resourse。
image.png
这下就可以读取到了。
根据源码读到，使用action参数访问配置控制器能看到配置内容，测试一下是否读取的到配置文件。
http://127.0.0.1:8081/UEditorConfig?action=config
读取成功。
image.png
这次我们要访问一下，这次没有报读取配置错误，而是在上传失败。
我们看一下config.json里的内容，
image.png
原来是不知道上传到哪里，这里增加一个basePath，作为上传的系统盘绝对路径
我们看一下上传图片的源码，也是使用action参数上传的图片。进入方法查看
image.png
image.png
发现使用的是BinaryUploder里的save方法出错，使用的是FileStream，我们这里用springboot使用MultipartHttpServletRequest来接收图片，再将basePath添加到上传路径之前，（在这里也可以更改rootPath参数）整个源码更改过程贴在下面。
public class BinaryUploader {
public static final State save(HttpServletRequest request,
Map<String, Object> conf) {
// aFileItemStream fileStream = null;
// boolean isAjaxUpload = request.getHeader( "X_Requested_With" ) != null;
if (!ServletFileUpload.isMultipartContent(request)) {
return new BaseState(false, AppInfo.NOT_MULTIPART_CONTENT);
}
// ServletFileUpload upload = new ServletFileUpload(
// new DiskFileItemFactory());
//
// if ( isAjaxUpload ) {
// upload.setHeaderEncoding( "UTF-8" );
// }
try {
// FileItemIterator iterator = upload.getItemIterator(request);
//
// while (iterator.hasNext()) {
// fileStream = iterator.next();
//
// if (!fileStream.isFormField())
// break;
// fileStream = null;
// }
//
// if (fileStream == null) {
// return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);
// }
MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest)request;
MultipartFile multipartFile = multipartHttpServletRequest.getFile(conf.get("fieldName").toString());
if(multipartFile==null){
return new BaseState(false,AppInfo.NOTFOUND_UPLOAD_DATA);
}
String savePath = (String) conf.get("savePath");
// String originFileName = fileStream.getName();
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 basePath = (String)conf.get("basePath");
// String physicalPath = (String) conf.get("rootPath") + savePath;
String physicalPath = basePath + savePath;
// InputStream is = fileStream.openStream();
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 (FileUploadException e) {
// return new BaseState(false, AppInfo.PARSE_REQUEST_ERROR);
} catch (IOException e) {
}
return new BaseState(false, AppInfo.IO_ERROR);
}
private static boolean validType(String type, String[] allowTypes) {
List<String> list = Arrays.asList(allowTypes);
return list.contains(type);
}
}
配置完之后，别忘记了将springboot创建虚路径与磁盘路径映射。
到此，重新启动，就能收到图片的上传和回显了。
打包后上传Linux图片无法回显
在获取config.json时，是需要获取springboot的resourse路径，打包后获取不了项目的启动路径，是springboot内路径，需要更改为绝对路径，如下图。区分调试时路径和打包后在linux上的路径。
图片.png
读取后数据库回显到编辑器中
我使用setContent方法的时候，设置失败了。后来使用了jquery来更改textarea的内容再初始化UEditor，读出内容到编辑器中成功。
网友评论