UEditor是由百度WEB前端研發部開發的所見即所得的開源富文本編輯器，具有輕量、可定制、用戶體驗優秀等特點。
開源基於BSD協議，所有源代碼在協議允許范圍內可自由修改和使用。
百度UEditor的推出，可以幫助不少網站開發者在開發富文本編輯器所遇到的難題，節約開發者因開發富文本編輯器所需要的大量時間，有效降低了企業的開發成本。
優點
1、體積小巧，性能優良，使用簡單
2、分層架構，方便定制與擴展
3、滿足不同層次用戶需求，更加適合團隊開發
4、豐富完善的中文文檔
5、多個瀏覽器支持：Mozilla, MSIE, FireFox, Maxthon,Safari 和Chrome
6、更好的使用體驗
7、擁有專業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(); } |