不得不吐槽一下这个巨坑。既然踩过一次，那就记录下来。废话不多说直接说如何做吧
1.在官网下载你需要的版本ueditor
QQ截图20180719164723.png
2.下载完之后解压。解压得到的文件除了jsp里面的其他的都是前端需要的。因为我们是前后端分离，所以jsp属于后台的东西自然不放在前端了
4.配置后台。直接将后台代码下载下来。添加到我们自己的项目中即可。在我们的controller层需要加上如下代码
**
* 用于读取Ueditor中的后台配置config.json
* @author zhangws
* @date 2018-7-20
*
*/
@RestController
@CrossOrigin
@RequestMapping("/ueditor")
public class UeditorController {
@RequestMapping(value ="/exec")
@ResponseBody
public String exec(HttpServletRequest request)throws UnsupportedEncodingException{
request.setCharacterEncoding("utf-8");
String rootPath = request.getRealPath("/");
return new ActionEnter( request, rootPath ).exec();
}
}
例如我自己调用这个链接http://xxx.xxx.xxx.xxx:9004/ueditor/exec?action=config
如果页面返回配置文件的json那说明后台配置成功
5.后台配置成功后那么我们在前端页面中找到ueditor.config.js文件
修改如下：
var URL = window.UEDITOR_HOME_URL || getUEBasePath();
/**
* 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
*/
window.UEDITOR_CONFIG = {
//为编辑器实例添加一个路径，这个不能被注释
UEDITOR_HOME_URL: URL
// 此处换成我们自己的controller即可，其实这个作用就是用来调用config.json的
, serverUrl: "http://xxx.xxx.xxx.xxx:9004/ueditor/exec"
其次就到了如何在上传的时候调用我们自己的上传接口，只需要在前端实例化Ueditor的时候重写一下方法即可。代码如下
UE.getEditor('editor');
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
console.log(action);
if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
return 'http://xxx.xxx.xxx.xxx:9005/seller/goods/uploadGoodsPic.do';//此处写自定义的图片上传路径
} else if (action == 'uploadvideo') {
return 'http://a.b.com/video.php';
} else {
return this._bkGetActionUrl.call(this, action);
}
}
后台上传接口如下：
@ResponseBody
@RequestMapping(value = "/goods/uploadGoodsPic.do", method = RequestMethod.POST)
public GanjieResponse<AttachmentModel> uploadGoodsPic(@RequestParam(value = "upfile") MultipartFile upfile) {
if (upfile == null) {
return new GanjieResponse<>(Constant.ERRCODE, "上传附件为空");
}
try {
InputStream ins = upfile.getInputStream();
int size = ins.available();
if (size <= 0) {
return new GanjieResponse<>(Constant.ERRCODE, "文件内容为空");
}
String fileName = upfile.getOriginalFilename();
return goodsManager.uploadFile(ins, fileName);
} catch (IOException e) {
LOGGER.error("FileItem.getInputStream() error", e);
return new GanjieResponse<>(Constant.ERRCODE, "获取输入流异常");
}
}
上面切记入参的时候参数名应该跟后台config.json的 imageFieldName 的值一致也就是"upfile",因为前端传值的时候是以这个表单的名字提交的。不然就没东西过来了。
``
"imageActionName": "uploadimage", /*uploadimage 执行上传图片的action名称 */
"imageFieldName": "upfile", /* 提交的图片表单名称 */
"imageMaxSize": 2048000, /* 上传大小限制，单位B */
``
