SpringBoot 整合 UEditor 详细教程（二）| 遇到的问题
目录
具体踩坑点：
- 1.自定义 toolbars 时出现 Could not parse as expression 异常
- 2.前端报错：请求后台配置项http错误，上传功能将不能正常使用
- 3.报错：“\u914d\u7f6e\u6587\u4ef6\u521d\u59cb\u5316\u5931\u8d25”（配置文件初始化失败）
- 4.配置上传图片，报错 ： 无效的Action
- 5.注释多图上传里面的其他按钮
- 6.注释部分功能无法使用的代码
- 7.保存成功后无法正常显示文字和图片，或显示为空白
- 8.部署到服务器又出现了第3点的问题，加载不到config.json文件
1. 自定义 toolbars 时出现 Could not parse as expression 异常：
因为我这里用的是 thymeleaf 模板引擎，所以将 script 标签改为：
以下是前端代码，去除了 toolbars 中不常用的工具按钮：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:se="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 配置文件 -->
<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>
<!-- 中文 -->
<script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>
</head>
<body>
<div>
<textarea id="ueditor" name="content" style="min-height: 500px"></textarea>
</div>
</body>
<!-- 实例化编辑器 -->
<script type="text/javascript" th:inline="none">
var ue = UE.getEditor('ueditor', {
toolbars: [[
'fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'directionalityltr', 'directionalityrtl', 'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
'simpleupload', 'map', 'pagebreak', 'template', 'background', '|',
'horizontal', 'date', 'time', 'spechars', '|',
'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
'preview', 'searchreplace', 'drafts'
]]
});
</script>
</html>
2. 如果前端报错：请求后台配置项http错误，上传功能将不能正常使用：
一般是路径没有对应上或者配置错误，可参考下面的截图
- 第一个URL是自带的，好像默认请求路径是：IP + 端口 + “/ueditor/config”
- 第二个serverUrl是自己写的，参考我的可以直接获取到当前项目的路径，也可以自己写（如：http://127.0.0.1:8080/）这样
3.如果报错：“\u914d\u7f6e\u6587\u4ef6\u521d\u59cb\u5316\u5931\u8d25”（配置文件初始化失败）
3.1.因为没次打开都会请求，在浏览器查看路径，直接copy下图红色框内的路径到浏览器新窗口打开：
3.2.检查config.json配置文件是否正确（不知道路径的看3.1）： http://localhost:8090/ueditor/config?action=config
-
如果返回：{“state”: “\u914d\u7f6e\u6587\u4ef6\u521d\u59cb\u5316\u5931\u8d25”}，即表示配置文件初始化失败。
-
如果返回一大串 JSON 格式的字符串，则表示成功。
原因是没有正确读取到 config.json 文件
3.3.解决方法：
可跟踪如下第一点的源码进行定位：
找到问题是因为没有读取到正确的文件路径（定位到问题后我将第二点的路径加上了 “/config.json” ）
源码定位步骤：（主要看 ConfigManager 类的构造方法里面的 this.originalPath 路径是否正确）
4.配置上传图片，报错 ： 无效的Action
我这里使用的是自定义的方法进行上传
自定义上传路径：
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action === 'uploadimage') {
return '/ueditorUpload';
} else {
return this._bkGetActionUrl.call(this, action);
}
}
这里的 “/ueditorUpload” 跟 ueditor.config.js 中的入口是在一个Controller中的不同方法，如果是别的方法，需要使用 IP + 端口 + 方法的方式请求
方法：
代码：
/**
* UEditor 上传图片（单个或多个）
* @return 返回提示信息
*/
@RequestMapping(value = "/ueditorUpload", method = RequestMethod.POST)
public Object upLoadImg(MultipartFile upfile){
Map<String,Object> map = new HashMap<String,Object>();
map.put("state", "上传失败");
if (Objects.isNull(upfile)) {
return map;
}
String oldName = upfile.getOriginalFilename();
String timeFileName = DateHelper.getDateStr(new Date());
// 判断当前系统是否是Windows系统
boolean system = isWindowsSystem();
String fileName = system ? FileUtils.upLoadFile(upfile,"F:/upload/admin/article/" + timeFileName)
: FileUtils.upLoadFile(upfile,imgUrl + "/" + timeFileName);
if (StringUtils.isNotBlank(fileName)) {
map.put("state", "SUCCESS");
// 图片url 浏览器不能直接访问项目外目录的图片等文件，需要做虚拟路径映射
// 这个路径的是在配置类里指定的映射到本地的绝对路径
if(system){
map.put("url", "/upload/admin/article/" + timeFileName + "/" + fileName);
} else {
map.put("url", hostUrl + mappingUrl + "/" + timeFileName + "/" + fileName);
}
//图片名称，这个会显示在输入框里
map.put("title", fileName);
//图片原名称
map.put("original", oldName);
//文件类型 .+后缀名
map.put("type", fileName.substring(fileName.lastIndexOf(".")));
//文件大小（字节数）
map.put("size", upfile.getSize());
}
log.info("map：{}", map);
return map;
}
/**
* 判断当前系统是否是Windows系统
* @return true：Windows系统，false：Linux系统
*/
private boolean isWindowsSystem(){
String property = System.getProperty("os.name").toLowerCase();
return property.contains("windows");
}
- hostUrl：http://127.0.0.1:8090/
- imgUrl：/upload/admin/article/（保存路径）
- mappingUrl：upload/admin/article/（映射路径）
映射方法：
/**
* 文件URL映射
*/
@Component
public class WebConfigurer extends WebMvcConfigurerAdapter {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/upload/admin/article/**")
.addResourceLocations("file:///upload/admin/article/");
}
}
使用本地路径的时候：““F:/upload/admin/article/””， config.json 中的文件路径配置为：
config.json：
注意：imageUrlPrefix前缀记得带上，不然图片会出现上传成功，但是显示图片不出来
如：
这里还有一个问题，就是我部署到线上后，发现上传图片还是不行，后期已经将上传图片的方法改为上传到OSS，这个问题目前还未找到解决方法，但有一个思路：应该是跟前面讲到的文件映射有关，或者我们将文件的路径映射到服务器的文件夹下
5.注释多图上传里面的其他按钮
找到对应的路径： ueditor/dialogs/image/image.html 注释掉代码即可
6.百度编辑器部分功能无法使用
在 ueditor/ueditor.config.js 中的设置如下
结果：
7.保存成功后无法正常显示文字和图片，或显示为空白，解决方法
html：
在回显的时候使用以下方法即可：
// content 即为我们在ueditor添加的内容
UE.getEditor('ueditorContent').execCommand('insertHtml', content);
8.部署到服务器又出现了加载不到config.json文件（这就很难受了）
服务器上是jar包，又没法代码调试，很无奈。
只能改代码，将config.json放到linux上的目录下：
UEditor 填坑参考网址： https://www.jianshu.com/p/5d4d15e558b7 .
欢迎关注公众号：慌途L
后面会慢慢将文章迁移至公众号，也是方便在没有电脑的情况下可以进行翻阅，更新的话会两边同时更新，大家不用担心！
888
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
