ueditor 教程 完美解決與easyui遮蓋 commons-io衝突 完整java配置
阿新 • • 發佈：2018-12-30
首先說下ueditor是什麼? ueditor是百度開發的 富文字編輯器,可以直接使用到專案中已經內建了多圖片上傳,視訊,檔案上傳等後臺功能和後臺包,
這裡主要說 javaweb工程整合配置
先去ueditor官網下載安裝包 1.4.3.3jsp版 最新更新是2016年2月 看來是很久沒人維護了
解壓到專案wbapp下任意路徑, 網上說最好根目錄 其實只要引入目錄正確放在那裡都可以
首先在jsp頁面引入 ueditor 相關檔案
<!-- 配置檔案 -->
<script type="text/javascript" src="<%=path%>sys/js/ueditor1433/ueditor.config.js"></script>
<!-- 編輯器原始碼檔案 -->
<script type="text/javascript" src="<%=path%>sys/js/ueditor1433/ueditor.all.js"></script>
然後在頁面中引入 ueditor (這裡就要講到與easyui的遮蓋問題)
$(function(){
var ue = UE.getEditor("articleContent");
});
<div id="articleContent"></div>
我這裡是用 easyui的easyui-dialog彈窗引用的會出現 點字型或文字大小 遮蓋的問題,怎麼辦網上有很多教程,但是試了半天都不管用,所以 看完ueditor原始碼發現,最後解決的方案是這樣的
在easyui 的easyui-dialog控制元件里加
//配置 easyui與ueditor相容問題(ueditor基礎配置不建議更改)
$("#dlg").dialog({
modal:false,
minimizable:false,
maximizable:false,
resizable:false,
closed:true,
onOpen:function(){
$(".window").css("z-index","499");
$(".window-shadow").css("z-index","498");
},
onMove:function(left,top){
$(".window").css("z-index","499");
$(".window-shadow").css("z-index","498");
},
onResize:function(width,height){
$(".window").css("z-index","499");
$(".window-shadow").css("z-index","498");
},
});
專案啟動 頁面 如果ueditor顯示證明前端基礎配置已經成功了,下面介紹一下設定和獲取ueditor內容
我這裡是用 easyui封裝的物件所以獲取的是String字串,如果想獲取ueditor自定義內容看下api
//獲取 ueditor例項
var ue = UE.getEditor("articleContent");
//給ueditor內容體賦值
ue.setContent(""); //賦值給UEditor
ue.getContentTxt();//獲取ueditor內容體(html程式碼)
然後說下後端配置
找到/ueditor/jsp/lib目錄 有4個基礎複製到lib目錄下 這裡要講下 ueditor封裝用的是 commons-io 2.4的包如果與你本身的專案相沖突建議更改本地專案的 io 版本或者 修改ueditor1.1.2.jar中的StorageManager.class類中的117行 File tmpDir = FileUtils.getTempDirectory();方法,FileUtils.moveFile(tmpFile,
targetFile);方法,這兩個方法是io.24才有的的方法
修改ueditor上傳圖片配置
找到 ueditor下的jsp資料夾下的 config.json檔案開啟
一般只修改 專案名和檔案儲存路徑即可 其他設定按照需要修改 其他圖片檔案等上傳設定相同
"imageUrlPrefix": "/e8p-db/", /* 專案名稱 */
"imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳路徑 */
這裡還要說下 ueditor自動儲存的問題,特別是在新建的時候出現上次儲存的內容特別頭疼, 網上找了很多方法都不能解決,據說是 1.4.3.3版本不能去掉,但是這裡我的方法是 新建的時候在js裡把 ueditor的內容複製為空解決這個問題 //獲取 ueditor例項 var ue = UE.getEditor("articleContent"); ue.setContent(""); //賦值給UEditor 時間的原因 稍後提供 ueditor 支援commons-io1.3.2的版本!
"imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳路徑 */
這裡還要說下 ueditor自動儲存的問題,特別是在新建的時候出現上次儲存的內容特別頭疼, 網上找了很多方法都不能解決,據說是 1.4.3.3版本不能去掉,但是這裡我的方法是 新建的時候在js裡把 ueditor的內容複製為空解決這個問題 //獲取 ueditor例項 var ue = UE.getEditor("articleContent"); ue.setContent(""); //賦值給UEditor 時間的原因 稍後提供 ueditor 支援commons-io1.3.2的版本!