百度 UEditor 學習筆記（一）自定義上傳文件路徑及讀取文件

UEditor是由百度WEB前端研發部開發的所見即所得的開源富文本編輯器，具備輕量、可定製、用戶體驗優秀等特色。

開源基於BSD協議，全部源代碼在協議容許範圍內可自由修改和使用。

 

百度UEditor的推出，能夠幫助很多網站開發者在開發富文本編輯器所遇到的難題，節約開發者因開發富文本編輯器所須要的大量時間，有效下降了企業的開發成本。 

 

優勢

一、體積小巧，性能優良，使用簡單 

二、分層架構，方便定製與擴展 

三、知足不一樣層次用戶需求，更加適合團隊開發 

四、豐富完善的中文文檔 

五、多個瀏覽器支持：Mozilla, MSIE, FireFox, Maxthon,Safari 和Chrome 

六、更好的使用體驗 

七、擁有專業QA團隊持續支持，已應用在百度各大產品線上 

 

 

使用步驟 

1.添加jar包 jar包位置：文件根目錄下jsp的lib文件夾下，把jar包複製到web-inf下的lib文件夾下buildpath 

 

2.修改config.js中的URL路徑，修改成UEidtor插件在本身工程中的正確根路徑

 

3.在jsp文件中先引入配置文件config.js而後再源碼文件all.js（注意順序） 

 

4.加載容器和實例化容器

 

 

 上傳圖片 

1.修改config.js配置文件URL爲插件根目錄，通常是絕對路徑。 

 

2.修改config.json中上傳圖片配置項中的訪問路徑前綴爲項目名稱，根據狀況修改上傳文件路徑和訪問路徑。 

配置正確以後UEditor有上傳功能幫助咱們上傳圖片。

 可是上傳路徑會在項目部署的臨時文件夾下。 tomcat取消部署後，上傳文件就會和項目部署文件一塊兒被刪除 

 

3.實現把圖片上傳到自定義路徑 　

　　在處理上傳後的文件名稱的時候注意不要出現中文 　

要否則還須要作處理才能正確讀取文件！ 

 

4.（1）首先在jsp中覆蓋UEidtor獲取路徑的方法 

//覆蓋UEditor中獲取路徑的方法      UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;      UE.Editor.prototype.getActionUrl = function(action) {      //判斷路徑   這裏是config.json 中設置執行上傳的action名稱          if (action == 'uploadimage') {              return 'http://localhost:8080/maven-web/uploadImage.do';          } else if (action == 'uploadvideo') {              return '';          } else {              return this._bkGetActionUrl.call(this, action);          }      }

 

 

 

（2）首先在springmvc配置文件中配置

<!-- 上傳配置 -->  <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="defaultEncoding" value="UTF-8"></property> </bean>

 

 

 

 

在controller中定義上傳和讀取文件的方法 /**   * SpringMVC 用的是 的MultipartFile來進行文件上傳   * 這裏用@RequestParam()來指定上傳文件爲MultipartFile   * @throws IOException   */ @RequestMapping("uploadImage") @ResponseBody　　　　　　　　　　　　　　//這裏upfile是config.json中圖片提交的表單名稱     public Map<String,String> uploadImage(@RequestParam("upfile")  CommonsMultipartFile upfile,HttpServletRequest request) throws IOException{           //文件原名稱 String fileName=upfile.getOriginalFilename();         //爲了不重複簡單處理 String nowName=new Date().getTime()+"_" + fileName;         if(!upimage.isEmpty()){           //上傳位置路徑          String path0 = "D:\\eclipseworkspace\\maven-web\\src\\main\\webapp\\upload\\"+nowName;          //按照路徑新建文件          File newFile = new File(path0);          //複製      FileCopyUtils.copy(upimage.getBytes(), newFile);         }         //返回結果信息(UEditor須要)          Map<String,String> map = new HashMap<String,String >();          //是否上傳成功          map.put("state", "SUCCESS");          //如今文件名稱          map.put("title", nowName);          //文件原名稱           map.put("original", fileName);          //文件類型 .+後綴名          map.put("type", fileName.substring(upfile.getOriginalFilename().lastIndexOf(".")));          //文件路徑          map.put("url", "/"+nowName+"/getImage.do");          //文件大小（字節數）          map.put("size", upfile.getSize()+"");                  return map; }

/**  * 讀取文件  */ @RequestMapping("{imgName}/getImage")     public void readImg(@PathVariable("imgName") String imgName,  HttpServletResponse response)               throws Exception {   //設置文件的返回類型         response.setContentType("image/*");         //文件路徑(windows下是\\，linux下是//，都必須是絕對路徑)         String imgPath="D:\\eclipseworkspace\\maven-web\\src\\main\\webapp\\upload\\"+imgName;         //java中用File類來表示一個文件         File image = new File(imgPath);         //測試這個文件路徑是否存在（也就是這個文件是否存在）         if (!image.exists()) {               return;           }           //FileUtils.readFileToByteArray(File file)把一個文件轉換成字節數組返回         response.getOutputStream().write(FileUtils.readFileToByteArray(image));           //java在使用流時,都會有一個緩衝區,按一種它認爲比較高效的方法來發數據:         //把要發的數據先放到緩衝區,緩衝區放滿之後再一次性發過去,而不是分開一次一次地發.         //而flush()表示強制將緩衝區中的數據發送出去,沒必要等到緩衝區滿.         response.getOutputStream().flush();           response.getOutputStream().close();       }