百度富文本编辑jsp上传_Ueditor百度富文本编辑器前后端配置自己的上传接口

不得不吐槽一下这个巨坑。既然踩过一次，那就记录下来。废话不多说直接说如何做吧

1.在官网下载你需要的版本ueditor

QQ截图20180719164723.png

2.下载完之后解压。解压得到的文件除了jsp里面的其他的都是前端需要的。因为我们是前后端分离，所以jsp属于后台的东西自然不放在前端了

3.先来说说后端该如何配置吧。后端源码，前端代码。

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 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 */

``