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

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

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

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

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

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

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

一、下载ueditor

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

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

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

 

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

二、前端配置

首先我们写前端页面

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

<script id="editor" name="message" style="height: 500px" type="text/plain"></script>

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路径正确的话，打开网页已经可以看到编辑器页面了，如下图所示：

 

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（图片访问路径前缀）

 

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

这个时候要将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类的路径

<bean id="multipartResolver" class="com.naah.tools.CommonsMultipartResolverPhhc">  
    <property name="maxUploadSize" value="102400000" />  
</bean>

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

快试试效果怎么样吧！

ueditor系列文章未完待续！