前幾日在專案中要使用到編輯器，於是度娘看了幾款前端編輯器，

最後...選擇了百度開發的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系列文章未完待續！