springMVC ueditor傻瓜配置系列之不成功你砍我！

川长思鸟来 2022-05-29 02:12 265阅读 0赞

前几日在项目中要使用到编辑器，于是度娘看了几款前端编辑器，

最后...选择了百度开发的ueditor编辑器，这可能是我最后悔的决定！

因为ueditor的文档写的实在是太他妈烂了！跟屎一样！尤其是后端配置！

不信你们看看他们官方文档！[Ueditor][]

不信你按照他们官方文档配置后端！

我在网上看了好多资料都不怎么对，最后我摸索了好几个小时终于配置成功！

# 一、下载ueditor #

下面进入正题，首先下载ueditor，我下载的是\[1.4.3.3 Jsp 版本\] [官方下载][Link 1] [本站下载（较慢）][Link 2]

下载后打开压缩包观察目录结构：

[![551a345ad88b492b8bc14b1fa1d31609.png][]][551a345ad88b492b8bc14b1fa1d31609.png]

我们用到的主要是ueditor.config.js，以及jsp/config.json，jsp/lib下的包！

首先展示我的文件结构目录，以防大家看晕！

[![722038231d1d48fb8813a1ff239a8f6f.png][]][722038231d1d48fb8813a1ff239a8f6f.png]

# 二、前端配置 #

首先我们写前端页面

1.在要放编辑器的div或其他标签内插入下面这条语句，该语句为编辑器窗口

2.根据自己的路径导入js，

注意路径，因为我习惯使用相对路径，我的所有controller都没有目录结构（如@RequestMapping("login.naah")），所以默认从根目录读取！

getEditor中的值要与上文中的id对应！

<script type="text/javascript" charset="utf-8" src="lib/ueditor/ueditor.config.js"></script>  <script type="text/javascript" charset="utf-8" src="lib/ueditor/ueditor.all.js"> </script> <script>var ue = UE.getEditor('editor');</script>

此时如果js路径正确的话，打开网页已经可以看到编辑器页面了，如下图所示：

[![9be3e63d51604d60b1b61d5de98a6a50.png][]][9be3e63d51604d60b1b61d5de98a6a50.png]

3.在ueditor.config.js中可根据注释设置编辑器的界面。

# 三、后端配置 #

刚刚配置前端后，当你点击图片附件等时会提示，后端配置不正确，无法使用该功能，

那就继续往下看吧！

## （1）配置上传功能 ##

1.首先我们根据jsp目录下的controller.jsp写出对应的springMVC的controller，该类主要是实现读取config配置并且上传那文件图片等功能，

这个RequestMapping的目录一定要和你的ueditor目录对应，否则无法解析config.json

@RequestMapping("lib/ueditor/ued.naah") public void config(HttpServletRequest request,HttpServletResponse response) { response.setContentType("application/json"); String rootPath = request.getSession().getServletContext().getRealPath("/"); try { String exec = new ActionEnter(request, rootPath).exec(); Files a = (Files) request.getSession().getAttribute("file"); if (a != null) { f.Ins(a); request.getSession().removeAttribute("file"); } PrintWriter writer = response.getWriter(); writer.write(exec); writer.flush(); writer.close(); } catch (IOException e) { e.printStackTrace(); } }

2.将jsp/lib下的jar包导入web-inf/lib，将jsp/config.json复制到ueditor下，然后可以选择性删除jsp文件夹

3.打开ueditor.config.js，对serverUrl进行修改，

我的RequestMapping为lib/ueditor/ued.naah，

因为URL为ueditor的目录，所以我们将RequestMapping中的目录去掉，

改为URL+'ued.naah'

serverUrl: URL + "ued.naah"

## （2）配置图片显示（文件等其他配置方式相同） ##

经过配置后我们会发现此时打开图片已经可以上传图片了，但是可能上传后无法显示图片，那么继续向下看

1.此时打开刚刚已经转移到ueditor下的config.json

2.在上传图片配置项中修改参数imageUrlPrefix（图片访问路径前缀）

如果此时调试运行包含项目名的话，可能如下

[![ba6b155c658b4691820ce2e386463fc2.png][]][ba6b155c658b4691820ce2e386463fc2.png]

这个时候要将imageUrlPrefix设置为/+项目名 如下：

"imageUrlPrefix": "/police", /* 图片访问路径前缀 */

如果运行不包含项目名的话，配置如下：

"imageUrlPrefix": "/", /* 图片访问路径前缀 */

3.文件上传目录可根据实际需求更改（文件上传后，脑子短路的我在eclipse内找图片找不到，后来才反应过来应该在tomcat的部署目录下）

"imagePathFormat": "/files/images/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

其他相对应的配置前缀同样如此配置。。。

## （3）ueditor与multipartResolver配置冲突解决方案 ##

在配置成功ueditor后，如果使用表单上传文件或者使用ajax异步传送文件返回url等操作，

会上传失败，下面提出解决方案：

1.在文件中建立该类

2.将url.contains("")中的值改为上文中我们创建的ueditor config读取类的RequestMapping的值

代表当遇到url为RequestMapping的文件则不拦截到multipartResolver中

import javax.servlet.http.HttpServletRequest; import org.springframework.web.multipart.commons.CommonsMultipartResolver; public class CommonsMultipartResolverPhhc extends CommonsMultipartResolver { @Override public boolean isMultipart(HttpServletRequest request) { String url = request.getRequestURI(); if (url != null && url.contains("lib/ueditor/ued.naah")) { return false; } else { return super.isMultipart(request); } } }

3.在springMVC.xml中配置bean

这个class路径就是上文中写的CommonsMultipartResolverPhhc类的路径

4.这个时候就可以成功的将ueditor与multipartResolver分离了

快试试效果怎么样吧！

ueditor系列文章未完待续！

[Ueditor]: http://ueditor.baidu.com/website/
[Link 1]: http://ueditor.baidu.com/build/build_down.php?n=ueditor&v=1_4_3_3-utf8-jsp
[Link 2]: http://123.206.28.198/attachment/20170511/fb7875070a074017ac12e23f98b8a02c.zip
[551a345ad88b492b8bc14b1fa1d31609.png]: http://123.206.28.198/attachment/20170511/551a345ad88b492b8bc14b1fa1d31609.png
[722038231d1d48fb8813a1ff239a8f6f.png]: http://123.206.28.198/attachment/20170511/722038231d1d48fb8813a1ff239a8f6f.png
[9be3e63d51604d60b1b61d5de98a6a50.png]: http://123.206.28.198/attachment/20170511/9be3e63d51604d60b1b61d5de98a6a50.png
[ba6b155c658b4691820ce2e386463fc2.png]: http://123.206.28.198/attachment/20170511/ba6b155c658b4691820ce2e386463fc2.png