前記：由於項目中需要有一個新增數據並且要能支持表格圖片上傳的功能。使用了ueditor控件。為實現這個功能，從一開始什么都看不懂，到一直連着弄了5天，總算是有了眉目。在此記錄一下以便能幫到可以和我一樣遇到問題的人！本人使用的是ueditor 1.4.3.3 的jsp 版本的。
首先下載ueditor 開發版 到本地目錄
下載地址：http://ueditor.baidu.com/website/download.html
下載后：
解壓后：文件夾名字是 utf8-jsp，
解壓后目錄是：
為了能更好的根據自己的項目進行擴展，最好是引入ueditor 源碼進行調試修改。當然也可以直接引入ueditor jar 包。但是這種方法不推薦，你無法調試，出了錯誤也很難定義問題。
下載源碼：
下載后：
解壓后：名稱是
解壓后的目錄為：
到此我們的准備工作就基本完成了，下面開始我們就要引入這些文件並且開始做一些配置了。
第一步：把下載的ueditor 1.4.3.3 的jsp版本的所有東西copy到你的項目的特定的目錄下。
在我的項目中我是放在webapp/WEB-INF/scripts/MyEditor下
想實現ueditor 的圖片上傳功能，其實主要的配置文件有config.json, ueditor.config.js 及你的頁面和后台controller。
使用之前，我們需要先引入相關的jar 包和源碼。 相關jar包在jsp/lib 下面。可直接在 utf8-jsp/jsp/lib 下看到
jar包引入：我的項目中是使用的maven管理jar包。 所以我直接在pom.xml 中添加相關的依賴。在此我們只需要添加前四個jar包即可。不需要添加ueditor-1.1.2.jar。因為ueditor-1.1.2.jar 是源碼打包而來，我們引入源碼后，就不需要引入此jar包了。
然后我們再來引入源碼：源碼的文件需要去ueditor-1.4.3.3\jsp\src 目錄下copy.
把src下的所有東西copy到你的項目中的后台代碼的位置。
前台頁面部分：
首先要引入相關的js文件。
頁面使用：ueditor 支持個性化定制。toolbars 是定義你需要的部分。如果不定義，則會調用ueditor.config.js中的toolbars配置。
下圖中有一個window.UEDITOR_HOME_URL的配置，此路徑是指你的相關js及css 文件存入的位置。請注意不要弄錯，否則頁面會報js錯誤，提示找不到相關文件
例如我把我的路徑改為 window.UEDITOR_HOME_URL = "${jsUrl}/test/"; 頁面報錯為:
<div style="width:97%;padding-left:10px;">
<SCRIPT id="myEditor" align="center" name="myEditor" type=text/plain></SCRIPT>
</div>
接下來看ueditor.config.js 這個文件里配置信息。 此文件中，有兩個比較關鍵的地方，一個是URL, 一個是serverUrl. serverUrl是請求后台讀取config.json配置文件的入口。一定不能配錯。原生態的配置是 jsp/controller.jsp. 在此，controller.jsp 其實是一個java 文件。一定不能當成簡單的jsp去理解。由於原生態的代碼里，controller.jsp 和config.json 是在同一個目錄下，所以此處serverUrl 用的是 URL+"jsp/controller.jsp". 但是實際上我們的項目的java 代碼可能不在此目錄下，這就需要修改入口了。
修改前：
修改后：
上圖中， getRootPath方法是獲取你的項目的根目錄。 例如在我的項目中， getRootPath 返回的就是 http://10.36.0.215:8080/lomsV5-web/
我的項目名稱是lomsV5-web
serverUrl 中的 jiKaiPiaoCommonSense 是要請求的controller 的映射。 config 是方法的名稱
controller 文件：
config 方法即為查找並讀取config.json文件信息。注意畫紅色線的部分有一個actionEnter的類。
點擊進入ActionEnter的構造方法， 你會發現有一個叫ConfigManager 的類，一步步查找會發現有一個getConfigPath的方法。
這個方法是獲取config.json 文件存入的位置。 我的是放在web-inf 下的classes 下面 所以我的這個方法修改為：
然后我們打開config.json 文件。 此文件中imageActionName是指圖片上傳的action名稱。 如果配置為uploadimage, 則是調用ueditor 本身原生態的上傳方法。應該也是可以自定義自己的上傳方法。 然后名稱配置成自己的映射。（此問題本人還未測試）。 imageUrlPrefix 是訪問路徑的綴。 imagePathFormat 是你上傳的文件要保存在哪里。
需要注意的一點： imageCompressEnable 是開啟是否壓縮的屬性， imageCompressBorder 是圖片壓縮最長邊限制。 這兩個參數只針對上傳多圖時才會啟作用。 對於單圖上傳是沒有任何作用的。ueditor壓縮的判定條件是圖片的寬。
單圖上傳需要壓縮圖片怎么辦？ 我的處理辦法是在StorageManager.java 中的 saveTmpFile 方法中做處理。
private static State saveTmpFile(File tmpFile, String path) { State state = null; File targetFile = new File(path); if (targetFile.canWrite()) { return new BaseState(false, AppInfo.PERMISSION_DENIED); } try { FileUtils.moveFile(tmpFile, targetFile); //按比例壓縮圖片后上傳 int[] imageHeightWidth = getImgWidth(targetFile); if(imageHeightWidth[0] > 767){ Float rate = (float)360.0/imageHeightWidth[0]; reduceImg(targetFile, path, 600, 360, rate); } } catch (IOException e) { return new BaseState(false, AppInfo.IO_ERROR); } state = new BaseState(true); state.putInfo( "size", targetFile.length() ); state.putInfo( "title", targetFile.getName() ); return state; }
以上代碼塊中，紅色字體部分的代碼是處理圖片壓縮的代碼。
壓縮圖片的代碼 ：
/** * 采用指定寬度、高度或壓縮比例 的方式對圖片進行壓縮 * @param imgsrc 源圖片地址 * @param imgdist 目標圖片地址 * @param widthdist 壓縮后圖片寬度（當rate==null時，必傳） * @param heightdist 壓縮后圖片高度（當rate==null時，必傳） * @param rate 壓縮比例 */ public static void reduceImg(File targetFile, String imgdist, int widthdist, int heightdist, Float rate) { try { // 檢查文件是否存在 if (!targetFile.exists()) { return; } // 如果rate不為空說明是按比例壓縮 if (rate != null && rate > 0) { // 獲取文件高度和寬度 int[] results = getImgWidth(targetFile); if (results == null || results[0] == 0 || results[1] == 0) { return; } else { widthdist = (int) (results[0] * rate); heightdist = (int) (results[1] * rate); } } // 開始讀取文件並進行壓縮 Image src = javax.imageio.ImageIO.read(targetFile); BufferedImage tag = new BufferedImage((int) widthdist, (int) heightdist, BufferedImage.TYPE_INT_RGB); tag.getGraphics().drawImage( src.getScaledInstance(widthdist, heightdist, Image.SCALE_SMOOTH), 0, 0, null); FileOutputStream out = new FileOutputStream(imgdist); JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out); encoder.encode(tag); out.close(); } catch (IOException ex) { ex.printStackTrace(); } }
獲取圖片的寬度的方法：
/** * 獲取圖片寬度 * * @param file * 圖片文件 * @return 寬度 */ public static int[] getImgWidth(File file) { InputStream is = null; BufferedImage src = null; int result[] = { 0, 0 }; try { is = new FileInputStream(file); src = javax.imageio.ImageIO.read(is); result[0] = src.getWidth(null); // 得到源圖寬 result[1] = src.getHeight(null); // 得到源圖高 is.close(); } catch (Exception e) { e.printStackTrace(); } return result; }
到了這里，那么你的配置已基本完成
http://10.36.0.215:8080/lomsV5-web/jiKaiPiaoCommonSense/config?action=config
在瀏覽器輸入這個訪問路徑會出現一串json字符串，是我們在config.json 中配置的信息
下面主要是說一些在配置過程中可能會遇到的問題：
1. 請求后台配置項http錯誤，上傳功能將不能正常使用！
如果ueditor.config.js 中路徑不對或是action名稱不對，前台js會報此錯誤。例如我的修改為： serverUrl: applicationPath + "/jiKaiPiaoCommonSense/test"
2. Uncaught ReferenceError: errorHandler is not defined
如果ConfigManager 中的getConfigPath中獲取config.json的路徑配置不正確會出現此問題。
例如我的修改為：return this.parentPath + File.separator + ConfigManager.configFileName;
3. 未找到上傳數據
如果沒有添加過濾器過濾使用百度EmEditor的URI，當點擊圖片上傳后點確定， 則會出現這個問題。
解決辦法：自己添加一個過濾器，對上傳的url進行過濾
在application-context.xml 中配置這個過濾器。過濾器名稱不能修改否則不能識別。
4. 無效的Action
當config.json 中imageActionName 配置不正確時會出現此問題。如我的項目中把 "imageActionName": "uploadimage", /* 執行上傳圖片的action名稱 */
修改為： "imageActionName": "test", /* 執行上傳圖片的action名稱 */ 則出現此問題
5. 圖片上傳后顯示不了。
這是因為圖片訪問路徑配置不對。例如我的配置是如下：
"imageUrlPrefix": "/lomsV5-web", /* 圖片訪問路徑前綴 */
"imagePathFormat": "/WEB-INF/images/jkpCategory/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
我的本意是想圖片上傳后保存在http://10.36.0.215:8080/lomsV5-web/WEB-INF/images/jkpCategory/ 下面。 但是訪問圖片的時候由於我前台做了映射，所以訪問的時候應該是 http://10.36.0.215:8080/lomsV5-web/img/jkpCategory/xx.jpg 才能訪問到。 如果只是這樣配置會出現上傳后圖片無法訪問。
解決此問題的方法是：
代碼跟蹤到BinaryUploader 的 save 方法的 80行，你會發現這里有保存一個url的值。 這個url 便是訪問圖片的路徑的值。 需要修改成正常的訪問路徑便能正常顯示。
所以我的本地修改為：
storageState.putInfo("url", PathFormat.format(savePath.substring(8, savePath.length()).replace("images", "img")));
到了這里，圖片便可正常上傳訪問
另外需要注意的是： 當你在本地開發完成后，把相應代碼部署到服務器上后需要修改的是。
1. 項目名稱修改為你服務器上項目。 例如，我本地工程名稱是 lomsV5-web. 但是服務器上卻是 bms. 注意修改。
2. 要正常使用功能。請先清除瀏覽器緩存。 本人使用的是chrome 瀏覽器。 因為首次訪問項目，瀏覽器會下載相關的js文件。當第二次再訪問時，即使你修改了部分js代碼，也是不會起作用的。 必須要先清除瀏覽器緩存，使其重新下載。 否則會出現以下問題(請求后台配置項http錯誤，上傳功能將不能正常使用！)
3. 起初出現上面第二的問題的時候，我以為是js引入有問題， 於是把ueditor.all.min.js 文件的引入去掉了，於是出現了UE.getEditor is not a function的問題。
更新於2017.01.18， 又來更新問題了。 不斷的發現問題，解決問題並且記錄下這些問題，以便能幫到和我一樣遇到同樣的問題的人。
問題一：web保存的數據（文字和圖片相結合的軟文）， 在我們的app上，不能正常顯示圖片。
問題出現原因： a. 你的項目有權限驗證。 而且你上傳了這些圖片后，並未給相應的路徑賦查看的權限。 例如，在我的項目中，我們是shiro 框架來驗證權限的。我上傳圖片的路徑是 "/WEB-INF/images/jkpCategory/uploadimage/。。。。。 “ ， 那么在shiro的配置文件中需要增加權限 。在applicationContext-shiro.xml中添加如下配置。
b. 也許你添加了這個權限后，app端的圖片依然不能正常顯示。 那就要查看你的數據庫中保存的圖片的數據src 屬性的路徑是否正確。 這里就不得不再提下config.json的重要性了。 這個配置文件很重要。要引起重視。 你可以發現在每一薦的圖片的配置薦中都有一個 *prefix 的配置。 這是配置圖片上傳路徑前綴的。可配相對路徑，也可配置絕對路徑。選擇配置相對路徑的話，你在web查看 內容是沒有影響的。 但是，在app端不能正常顯示了， 因為傳到app端的數據的src 屬性是 src="/bms/.....jpg". 而真正的我們要保存成src="http://www....:host/bms/...jpg". 那么我們要修改config.json 中 *prefix 的配置項。
問題二：從網上直接復制的新聞或是軟文中的圖片不能正常顯示。 這個問題要關注config.json中這一部分的配置。
還要關注ImageHunter.java 的第95行。 這個url是前台訪問網絡復制過來的圖片的地址。 我這個是針對自己的項目而修改的。
