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

Posted by Naah on Thursday, May 11,2017 09:31:18

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

最后…选择了百度开发的ueditor编辑器,这可能是我最后悔的决定!

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

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

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

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

1 下载ueditor

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

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

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

 

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

2 前端配置

首先我们写前端页面

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中可根据注释设置编辑器的界面。

3 后端配置

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

那就继续往下看吧!

 

3.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"

 

3.2 配置图片显示(文件等其他配置方式相同)

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

 

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

 

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

 

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

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

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

如果运行不包含项目名的话,配置如下:

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

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

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

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

3.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分离了

快试试效果怎么样吧!