由於項目需要,最近使用了ueditor,並實現了圖片以及文件的上傳功能。走了不少彎路,花了點時間總結總結,記錄一下以防忘記!
1.去官網http://ueditor.baidu.com/website/download.html下載ueditor,我下載的是
ueditor1_3_6-utf8-jsp版本的。
2、把解壓出來的包中的jsp文件夾下的commons-fileupload-1.2.2.jar和ueditor.jar兩個架包放在項目中(存放位置依據項目
而定,本次使用的是maven項目,所以放在maven的中央倉庫中),然後再把 Uploader.java這個 上傳輔助類拿出來放在 項目的 公共包裏,便於引用。
---------------------------------------開始配置路勁----------------------------------------------------------
1.如圖把上傳圖片放在我想要的file/ueditor的路勁上,而不是ueditor自定義的jsp/upload中
2.配置ueditor.config.js 如下圖
其中imageUrl基本不用動。
而imagePath是指,你圖片上傳成功後,點確認時,在ueditor編輯器裏顯示圖片的地址(就是那個你點源碼後,顯示<img
src="xxx"/>引用的圖片所在路勁。因爲我的圖片地址是在項目下的file/ueditor路勁,直接引用的相對路勁,所以沒有配置,但必
須要給個空,否則上傳成功後圖片無法顯示),如圖
savePath是圖片保存所在的文件夾的名稱(我的就是ueditor),當你修改savePath的值,必須也要同時修改jsp文件夾下的
config.properties裏面的savePath的值,需要配置相同的值,否則 點上傳的時候後報“非法路勁錯誤”錯誤
3 接下來需要配置 imageUp.jsp實現自定義的路勁
找到imageUp.jsp中的up.setSavePath(dir );將其修改爲你定義的路勁,如圖
因爲我在ueditor.config.js和config.properties裏已經定義了保存圖片所在文件夾的名稱 ueditor ,所以此處只需要加個 file/就可以了。
4.下面就是配置 Uploader.java上傳輔助類了
㈠。首先需要在 Uploader.java 找到 savePath,改爲你的定義路勁,如圖
㈡。再接着修改Uploader.java下的 getPhysicalPath()方法,如圖
①. ueditor自帶的getPhysicalPath()方法,返回的realPath路勁是
D:\MyEclipse3.5\WORKSPACE\您的項目名\src\main\webapp\ueditor\jsp\imageUp.jsp這樣的絕對路勁,
而最後 new File(realPath).getParent() + "/" + path;
返回的是D:\MyEclipse3.5\WORKSPACE\您的項目名\src\main\webapp\ueditor\jsp\file\ueditor,所以最後 創建的文件File是在ueditor/jsp下面
②.因爲 我自定義的 文件路勁是項目下的 file/ueditor ,我需要
D:\MyEclipse3.5\WORKSPACE\您的項目名\src\main\webapp\file\ueditor樣的一個路勁 去創建File。
所以我重寫了getPhysicalPath()方法直接獲得 項目下的路勁。
㈢。最後就是修改 Uploader.java下的getFolder()方法(只是我的項目需要修改,如果項目中沒有需要可以不用修改這個方法直接跳過就好),如圖
這一步是在你定義的路勁後面追加一個以當前日期爲名稱的子文件夾(例如:file/ueditor/2014-1-1),因爲我不需要所以直接註釋了追加 當前日期 的方法。
5.這樣就配置完成了,可以上傳圖片了額
上傳成功時 ,在imageUp.jsp裏最後 up.getUrl() 返回的圖片路勁就是 我們配置的file/ueditor/78751388636301772.png了。
最後一步 當你點確認的時候,就需要上面在 ueditor.config.js裏配置的imagePath的路勁把圖片顯示在編輯器裏了,
ueditor內部就把我們配置 的imagePath追加在返回的up.getUrl()前面!
因爲我的需要 所以這是上面imagePath給空的原因了。。。。。。。。。下面就可以顯示圖片啦
最後在追加個剛測出的問題 ,就是上面ueditor.config.js中imagePath我是給的空值,這樣會在你預覽的時候 圖片顯示路勁會不正確!會在你返回的路勁前面 追加上 ueditor/dialogs/preview,所以爲了解決這個問題,我還是在imagePath加了項目名稱。
但是又擔心以後項目名變更,所以 就是用了js 動態獲取項目名稱:
var pathName=window.document.location.pathname;
//獲取帶"/"的項目名,如:/uimcardprj
var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
修改如下圖: