UMeditor百度富文本編輯器的使用
批量上傳的圖片在線管理沒法查看圖片 是因為jar包本身的Bug,這裏暫時做了個替換展示。就是找到Img.js 然後搜索
img.set 替換下就好了
var url=list[i].url ;
url=url.replace("D:/JavaWorkSpace/.metadata/.me_tcat7/webapps/WebEUEdit","");
//img.setAttribute(‘src‘, urlPrefix + list[i].url + (list[i].url.indexOf(‘?
‘) == -1 ? ‘?
noCache=‘:‘&noCache=‘) + (+new Date()).toString(36) );
// img.setAttribute(‘_src‘, urlPrefix + list[i].url);
img.setAttribute(‘src‘, urlPrefix +url + (url.indexOf(‘?
‘) == -1 ?
‘?
noCache=‘:‘&noCache=‘) + (+new Date()).toString(36) );
img.setAttribute(‘_src‘, urlPrefix +url);
domUtils.addClass(icon, ‘icon‘);
API地址
http://fex.baidu.com/ueditor/#server-jsp
用起來感覺非常easy。主要配置什麽的就不多說了。就把環境。這裏主要是解說下我怎麽搭的環境。還有經常使用的ToolBar配置，其它的視頻上傳路徑什麽的就去看api吧
UMeditor為眼下最好用簡單的富文本編輯器，當中的各種文件上傳等等差點兒不用配置，僅僅須要拷貝樣例代碼就好了
第一部：下載相應語言的源代碼包，我的是jsp版。裏面的index.html是最全的完整案例
第二部：新建一個webproject，而且在webroot以下穿件一個目錄用來放這個富文本插件，把上面下載的全部東西復制到這個目錄裏面
第三部：把EU/jsp以下的jar包復制到lib以下，記住必須是拷貝進去，不能引入到項目，否則會報錯。
測試是否部署成功。
直接執行項目 輸入地址
action=config" target="_blank">http://localhost:8080/WebEUEdit/EU/jsp/controller.jsp?action=config ，假設以下提示是一個js的。文本顯示就說明正確了
頁面顯示結果Like這樣
{"snapscreenInsertAlign":"none","videoPathFormat":"/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}","videoFieldName":"upfile","fileManagerActionName":"listfile","fileUrlPrefix":"","imageUrlPrefix":"","imageAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp"],"videoAllowFiles":[".flv",".swf",".mkv",".avi",".rm",".rmvb",".mpeg",".mpg",".ogg",".ogv",".mov",".wmv",".mp4",".webm",".mp3",".wav",".mid"],"filePathFormat":"/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}","fileMaxSize":51200000,"fileManagerListPath":"/ueditor/jsp/upload/file/","catcherUrlPrefix":"","videoActionName":"uploadvideo","scrawlInsertAlign":"none","videoUrlPrefix":"","imageManagerUrlPrefix":"","scrawlUrlPrefix":"","imageFieldName":"upfile","fileManagerAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp",".flv",".swf",".mkv",".avi",".rm",".rmvb",".mpeg",".mpg",".ogg",".ogv",".mov",".wmv",".mp4",".webm",".mp3",".wav",".mid",".rar",".zip",".tar",".gz",".7z",".bz2",".cab",".iso",".doc",".docx",".xls",".xlsx",".ppt",".pptx",".pdf",".txt",".md",".xml"],"imageMaxSize":2048000,"catcherPathFormat":"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}","imageManagerInsertAlign":"none","scrawlFieldName":"upfile","imagePathFormat":"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}","scrawlActionName":"uploadscrawl","imageManagerActionName":"listimage","imageActionName":"uploadimage","imageManagerListSize":20,"imageManagerAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp"],"fileAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp",".flv",".swf",".mkv",".avi",".rm",".rmvb",".mpeg",".mpg",".ogg",".ogv",".mov",".wmv",".mp4",".webm",".mp3",".wav",".mid",".rar",".zip",".tar",".gz",".7z",".bz2",".cab",".iso",".doc",".docx",".xls",".xlsx",".ppt",".pptx",".pdf",".txt",".md",".xml"],"snapscreenActionName":"uploadimage","fileFieldName":"upfile","fileActionName":"uploadfile","catcherActionName":"catchimage","fileManagerListSize":20,"catcherAllowFiles":[".png",".jpg",".jpeg",".gif",".bmp"],"snapscreenPathFormat":"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}","imageCompressBorder":1600,"snapscreenUrlPrefix":"","imageCompressEnable":true,"catcherLocalDomain":["127.0.0.1","localhost","img.baidu.com"],"imageManagerListPath":"/ueditor/jsp/upload/image/","imageInsertAlign":"none","catcherMaxSize":2048000,"videoMaxSize":102400000,"fileManagerUrlPrefix":"","scrawlPathFormat":"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}","scrawlMaxSize":2048000,"catcherFieldName":"source"}
上面 就是代表代碼已經部署上去 以下是使用
在一個jsp頁面上這樣寫代碼
引入一下3個
<script type="text/javascript" charset="utf-8" src="EU/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="EU/ueditor.all.min.js"> </script>
<!--建議手動加在語言，避免在ie下有時由於載入語言失敗導致編輯器載入失敗-->
<!--這裏載入的語言文件會覆蓋你在配置項目裏加入的語言類型。比方你在配置項目裏配置的是英文。這裏載入的中文，那最後就是中文-->
<script type="text/javascript" charset="utf-8" src="EU/lang/zh-cn/zh-cn.js"></script>
<body>
<script id="editor" type="text/plain" style="width:1024px;height:500px;">這個就是富文本的元素</script>
<button onclick="getContent()">獲得內容</button>
<script type="text/javascript">
//實例化編輯器
//建議使用工廠方法getEditor創建和引用編輯器實例。假設在某個閉包下引用該編輯器，直接調用UE.getEditor(‘editor‘)就能拿到相關的實例
var ue = UE.getEditor(‘editor‘);
function getContent() {
var arr = [];
arr.push("使用editor.getContent()方法能夠獲得編輯器的內容");
arr.push("內容為：");
arr.push(UE.getEditor(‘editor‘).getContent());
alert(arr.join("\n"));
}
</script>
</body>
經過上面 訪問jsp頁面 就好了 當中文件上傳什麽的 所有不須要配置了，僅僅須要自己去配置相關文件上傳路徑就好了這個能夠去看api 系統默認的上傳路徑是webroot下的edit文件，裏面有img file 等等類型的文件上傳
最後效果
關於富文本上面的toolbar可在這裏配置
相關上傳文件的配置 能夠再這裏自己去看
UMeditor百度富文本編輯器的使用