一、 在線編輯器在頁面正常顯示
1. 上百度Editor首頁下載http://ueditor.baidu.com/website/
2. COPY到自己的項目中去,然后記住ueditor所在文件的目錄
3. 配置editor_config.js中的URL(這一步很重要),因為我在html文件中測試的時候是沒有修改配置文件的信息也可以用,但是用在項目編輯器就無法顯示
/** * 此處配置寫法適用於UEditor小組成員開發使用,外部部署用戶請按照上述說明方式配置即可,建議保留下面兩行,以兼容可在具體每個頁面配置window.UEDITOR_HOME_URL的功能。 */ var tmp = location.protocol.indexOf("file")==-1 ? location.pathname : location.href; URL = window.UEDITOR_HOME_URL||tmp.substr(0,tmp.lastIndexOf("\/")+1).replace("_examples/","").replace("website/","");//這里你可以配置成ueditor目錄在您網站的相對路徑或者絕對路徑(指以http開頭的絕對路徑)
/** * 配置項主體。注意,此處所有涉及到路徑的配置別遺漏URL變量。 */ window.UEDITOR_CONFIG = { //為編輯器實例添加一個路徑,這個不能被注釋 UEDITOR_HOME_URL : URL //圖片上傳配置區 ,imageUrl:URL+"jsp/imageUp.jsp" //圖片上傳提交地址 ,imagePath:URL + "jsp/" //圖片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置
圖片上傳路徑配置區域是在:ueditor.config.js里URL路徑是直接指向了ueditor所在項目中的位置。如:/tools/editor/
原因是window.UEDITOR_HOME_URL沒有定義,只要在引入script腳本前聲明並復制就可以正常使用了,見下代碼:
<!DOCTYPE HTML> <html> <head> <title>完整的demo</title> <meta http-equiv="Content-Type" content="text/html;charset=gbk"/> <script> var UEDITOR_HOME_URL = "/ueditor/"; //從項目的根目錄開始 </script> <link type="text/css" href="./themes/default/css/ueditor.css" rel="stylesheet"/> <script type="text/javascript" src="./editor_config.js"></script> <script type="text/javascript" src="./editor_all.js"></script> </head> <body> <div> <script id="myEditor" type="text/plain">歡迎使用</script> </div> <script type="text/javascript"> //初始化 var ue = UE.getEditor('myEditor'); </script> </body> </html>
還有一點就是,如果沒有引入editor.css文件那么部分功能的顯示將會沒有那么好看。(廢話。。。)
二、 圖片上傳
1. 具體包括imageUp.jsp和Uploader.java這兩個文件
2. 在jsp頁面中只需要引入正確Uploader.java所在的包就行。
3. 剩下的工作就是在Uploader.java中修改圖片上傳的目錄、制定文件名生成規則等等。 做實現過程中讓我很糾結的是:配置完成沒問題了,但是就是圖片上傳不成功具體錯誤如下:
3.1 在沒有找到Uploader類的情況下就會報:網絡設置不正確,上傳失敗(大概就是這個意思。。。)
3.2 所有的工作都做完的情況下,上傳圖片就是不成功,捕獲異常呢也捕獲不到,最后設置斷點之后才知道fii.hasNext()返回為false,根本原因就是:
因為我用的是S2SH框架,在web.xml中struts2過濾器中把*.jsp去掉,如下代碼應該去掉,那就OK了:
1 <filter-mapping> 2 <filter-name>struts2</filter-name> 3 <url-pattern>*.jsp</url-pattern> 4 </filter-mapping>
1 public void upload() throws Exception{ 2 boolean isMultipart = ServletFileUpload.isMultipartContent(this.request); 3 if (!isMultipart) { 4 this.state = this.errorInfo.get("NOFILE"); 5 return; 6 } 7 DiskFileItemFactory dff = new DiskFileItemFactory(); 8 String savePath = this.getFolder(this.savePath); 9 dff.setRepository(new File(savePath)); 10 try { 11 ServletFileUpload sfu = new ServletFileUpload(dff); 12 sfu.setSizeMax(this.maxSize * 1024); 13 sfu.setHeaderEncoding("gbk"); 14 FileItemIterator fii = sfu.getItemIterator(this.request); 15 while (fii.hasNext()) { 16 FileItemStream fis = fii.next(); 17 if (!fis.isFormField()) { 18 this.originalName = fis.getName().substring(fis.getName().lastIndexOf(System.getProperty("file.separator")) + 1); 19 if (!this.checkFileType(this.originalName)) { 20 this.state = this.errorInfo.get("TYPE"); 21 continue; 22 } 23 this.fileName = this.getName(this.originalName); 24 this.type = this.getFileExt(this.fileName); 25 this.url = savePath + "/" + this.fileName; 26 BufferedInputStream in = new BufferedInputStream(fis.openStream()); 27 FileOutputStream out = new FileOutputStream(new File(this.getPhysicalPath(this.url))); 28 BufferedOutputStream output = new BufferedOutputStream(out); 29 Streams.copy(in, output, true); 30 this.state=this.errorInfo.get("SUCCESS"); 31 //UE中只會處理單張上傳,完成后即退出 32 break; 33 } else { 34 String fname = fis.getFieldName(); 35 //只處理title,其余表單請自行處理 36 if(!fname.equals("pictitle")){ 37 continue; 38 } 39 BufferedInputStream in = new BufferedInputStream(fis.openStream()); 40 BufferedReader reader = new BufferedReader(new InputStreamReader(in)); 41 StringBuffer result = new StringBuffer(); 42 while (reader.ready()) { 43 result.append((char)reader.read()); 44 } 45 this.title = new String(result.toString().getBytes(),"gbk"); 46 reader.close(); 47 } 48 } 49 } catch (Exception e) { 50 e.printStackTrace(); 51 this.state = this.errorInfo.get("UNKNOWN"); 52 } 53 }