springMVC+maven+nginx ueditor上传配置详解

来源：互联网发布：新一代网络架构编辑：程序博客网时间：2024/05/31 13:16

下载Jsp开发版放到项目中。项目使用nginx代理静态文件，所以把ueditor放在static/js目录下。
添加jsp/lib下的jar包依赖。项目使用maven管理jar包，所以在pom文件中添加相关依赖，其中ueditor的jar需要自己上传到maven仓库。
获取config.json配置文件。项目使用springMVC，所以把jsp下的controller.jsp改成controller的形式，如下：

@Value("${site.ueditor.path}")private String rootPath;@RequestMapping("/ueditor/config")public void config(HttpServletRequest request, HttpServletResponse response, String action) {    try {        request.setCharacterEncoding("utf-8");        response.setHeader("Content-Type", "text/html");        //String rootPath = request.getServletContext().getRealPath("/");        String exec = new ActionEnter(request, rootPath).exec();        PrintWriter writer = response.getWriter();        writer.write(exec);        writer.flush();        writer.close();    } catch (IOException e) {        e.printStackTrace();    }}

由于ueditor并未放置在项目根目录下，所以需将rootPath配置为ueditor所在的目录，这样程序会到ueditor所在目录下的ueditor文件夹（controller的映射）下面去找config.json配置文件。修改ueditor.config.js中的serverUrl，请求以上接口就可以获取到配置文件。
4. 请求自己的接口上传文件，如下：

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;UE.Editor.prototype.getActionUrl = function(action) {    if (action == 'uploadimage' || action == 'uploadvideo') {        return createUrl('/ueditor/upload');    } else {          return this._bkGetActionUrl.call(this, action);    }}

用此方法就不需要修改config.json文件中的imageActionName配置。

@Value("${site.imgs.path}")private String imgsPath;@RequestMapping(value = "/ueditor/upload", method = RequestMethod.POST)@ResponseBodypublic Map<String, String> upload(MultipartHttpServletRequest multipartRequest) throws IllegalStateException, IOException {    MultipartFile multipartFile = multipartRequest.getFile("upfile");    String original = multipartFile.getOriginalFilename();    String type = original.substring(original.lastIndexOf("."));    String fileName = "UED_" + System.currentTimeMillis() + type;    String filePath = imgsPath + fileName;    File file = new File(filePath);    if (!file.exists()) {        file.mkdirs();    }    multipartFile.transferTo(file);    Map<String, String> result = new HashMap<String, String>();     result.put("state", "SUCCESS");    result.put("original", original);    result.put("size", String.valueOf(file.length()));    result.put("title", fileName);    result.put("type", type);        result.put("url", fileName);     return result;}

需要注意的是接口返回的json数据一定要满足ueditor需要的格式。
5. 图片上传成功后正确的显示。修改config.json文件中的imageUrlPrefix配置为上传图片所在的目录。
附：ueditor初始化配置

var ue = UE.getEditor('container',{    enableAutoSave: false,    elementPathEnabled: false,    wordCount: false,    autoClearinitialContent: true,    initialContent: '<p></p>',    initialFrameHeight: 300,    saveInterval: 5000000});ue.ready(function() {    ue.setContent('<p></p>');});

0 0