個人官網、公司項目都需要 可視化編輯器，百度UEditor做得很不錯，就用的這個。項目後臺用到了SpringMVC、Freemarker，開發過程中部署在Jetty，線上部署用Tomcat，最後可能配置Nginx代理。
在實際使用過程中，遇到了太多的問題，因此有必要梳理和總結下。
1. 先說百度UEditor在Java環境中的使用：
1.1 Html頁面或者Freemarker模版裏，引入百度UEditor的相關JS和CSS，如下
<script type="text/javascript" src="../../public/framework/ueditor/ueditor.config.js"></script>
<!-- 編輯器源碼文件 -->
<script type="text/javascript" src="../../public/framework/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="../../public/framework/ueditor/lang/zh-cn/zh-cn.js"></script>
<!-- 實例化編輯器 -->
<script type="text/javascript">
var ue = UE.getEditor('editor');
</script>
1.2接着在正文中，有如下代碼
<script id="editor" type="text/plain" name="content" ></script>
1.3配置圖片上傳
ueditor.config.js設置：serverUrl: URL + "../../../ueditor/controller.jsp"
這個請求向後端發送請求：
獲得config.json總體的配置文件，config.json裏設置了 抓取圖片的url等各種參數。
2.圖片上傳是最麻煩的地方：?
2.1項目中使用的是Freemarker作爲視圖層，並且我不想再配置JSP視圖解析了，故不想使用controller.jsp這種JSP。
而是改成了SpringMVC的Controller：
@Controller
public class UeditorController {
@RequestMapping("/ueditor/config")
public void config(HttpServletRequest request,
HttpServletResponse response, String action) {
response.setContentType("application/json");
// config.json配置文件和圖片上傳位置，都默認爲“網站根目錄”
String rootPath = request.getSession().getServletContext() .getRealPath("/");
//自己設置的目錄
Object uploadRootPath = BasePropertyConfigurer.getContextProperty("setting.upload_root_path");
if (uploadRootPath != null) {
rootPath = uploadRootPath.toString();
}
try {
String exec = new ActionEnter(request, rootPath).exec();
PrintWriter writer = response.getWriter();
writer.write(exec);
writer.flush();
writer.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
上述代碼中的大部分內容，都是從controller.jsp搬來的。
經過實際使用發現，config.json配置信息和圖都需要放到項目內部，即webapp下。
我個人想把圖片存放到外部目錄，方便備份，並且就算整個項目完全重新部署，用戶和項目的圖片數據也不會丟失。
所以，手動修改了rootPath ，最後config.json和圖片目錄都存放在C:/img下。
2.2第二天突然發現，圖片無法上傳 ，錯誤提示“無法獲得數據”。（這個問題困擾了我幾個小時）
Debug跟蹤了每一層，發現SpringMVC攔截了圖片上傳請求。用戶上傳的圖片，已經存儲到服務器的臨時目錄，在拷貝這個圖片到實際存儲目錄，提示找不到，最後也無法把圖片回顯給前端。
最後經過逐步對比昨天的代碼，突然發現，某同事增加了SpringMVC上傳配置。
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="104857600"/>
<property name="maxInMemorySize" value="4096"/>
</bean>
有了上述配置，通過SpringMVC的Controller響應UEditor的各種請求，就出了問題。也沒有找到好的解決辦法。
最終，還是使用JSP的。
2.3使用JSP-controller.jsp響應UEditor，在SpringMVC中增加JSP視圖解析配置。
<bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/ueditor/" />
<property name="suffix" value=".jsp" /><!--可爲空,方便實現自已的依據擴展名來選擇視圖解釋類的邏輯 -->
<property name="viewClass"
value="org.springframework.web.servlet.view.JstlView" />
</bean>
2.4圖片上傳之後，前端還需要回顯圖片，這個時候又要響應圖片請求。
後端管理系統，SpringMVC是攔截所有的請求，“/”，而不是隻攔截動態請求，比如“*.html”。所以，SpringMVC可以處理攔截到圖片請求。
增加如下配置：
<mvc:resources mapping="/ueimg/ueditor/**" location="file:${setting.upload_root_path}/ueimg/ueditor/**" />
2.5我不想讓SpringMVC處理圖片，以爲我覺得讓Tomcat性能更好。
問題來了，圖片是存儲到服務器的外部目錄，比如C：/img，而不是/webapp/img。
針對服務器內部的圖片，Tomcat可以如下配置，web,xml
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>/static/*</url-pattern>
</servlet-mapping>
而據Boss所說，web.xml裏不能映射圖片到外部目錄。（我沒有去嘗試）
解決辦法顯然是有的，只要部署了Nginx，任何靜態資源，我都可以配置代理，讓Nginx響應或者控制轉發。
但是，在開發過程中，我絕對不願意再整個Nginx，項目開發依賴的環境越來越多，這是個大問題。
我認爲Nginx只是提高性能，方便線上的，本地項目開發根本不應該依賴它。
最後，目前的情況下，我是讓SpringMVC處理百度UEditor的圖片請求，等到線上部署，配置Nginx，讓Ngnix處理。
2.6除了上面第2個問題，增加SpringMVC上傳配置，導致我原來的配置出現了問題，還有一個大問題。
我個人官網項目，前端和後端是一個項目，沒有分開。
而公司項目，前端和後端是完全的2個項目。
config.json有如下配置：
"imageUrlPrefix": "", /* 圖片訪問路徑前綴 */
"imagePathFormat": "/ueditor/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}"
我自己的項目，沒有配置“圖片訪問路徑前綴”，經實際觀察，後臺數據庫存儲的圖片url就是“相對路徑”，
與imagePathFormat配置基本一樣。
前端訪問圖片的時，由於配置域名，瀏覽器會自動加上當前項目的路徑，比如"http://localhost:8080",或者“http://fansunion.cn”。
最終的圖片訪問路徑是個“絕對路徑”，"http://localhost:8080/ueditor/upload/..."
但是公司後端系統沒有部署在根目錄，訪問路徑是"http://localhost:8080/backend"，
不配置mageUrlPrefix，後臺存儲的雖說是相對路徑，但瀏覽器發送的url是：
"http://localhost:8080/backend/ueditor/..."，沒有加上"項目名稱"，所總是無法正常回顯。
2.7爲了解決公司後端項目，圖片無法回顯的問題，我配置了imageUrlPrefix："http://localhost:8080/backend"。
圖片就正常顯示了。
問題又來了，數據庫存儲的圖片路徑是絕對的"http://localhost:8080/backend/ueditor"。
如果我們後端項目更換了路徑，就無法響應這個圖片了。
除此之外，前端項目顯示圖片時，後端必須響應圖片請求，前端和後端產生了依賴關係，這是萬萬不能接受的。
2.8又改成不配置“圖片訪問路徑前綴”，只存儲圖片的相對路徑，後端項目開發部署在“根目錄下”，訪問路徑是：“http://localhost:8080”。
後端項目有圖片請求，自己處理，前端項目自己的圖片請求，自己處理，前後端2個系統沒有依賴。
本以爲萬事大吉了，結果又跪了。
前端項目也沒有部署在根目錄，加上了項目名稱，如：http://localhost:8080/user-center
訪問圖片是路徑是“http://localhost:8080/ueditor/...”，把user-center項目部署在根目錄，圖片就正常顯示的。
2.9線上實際部署的時候，不可能前端和後端2個項目，都部署在根目錄下。
因此，我們最終決定，把圖片單獨拿成一個單獨的項目，啓用自己的域名。
config.json中配置圖片前綴爲：“http：//img.a.com”，數據庫存儲絕對路徑，顯示的時候，就是“http://img.a.com/ueditor/...”。
3.百度UEditor上傳圖片，很簡單。
但由於後端項目的配置、前端和後端項目分離、配置了SpringMVC上傳，種種因素導致這個問題變得有點複雜。經過各種嘗試，總是能夠找到一個解決方案，只是有的能接受，有的不能接受。
我自己的項目，我說了算，很容易搞定。公司的項目，我說了不算，情況也可能多變，麻煩死了額。
原文地址 http://www.itnose.net/detail/6157995.html