專案後端使用語言 :java ,ssm框架 maven 工程 (普通的jar包方式自己新增jar就OK了,) 最近專案中使用到富文字功能,參考和比較之下,採用了百度的Ueditor 富文字編輯器.感謝百度. 現在把實現的方式介紹給大家，使用的是最新的UEditor版本1.4.3.1,官網下載地址 ,選擇了 jsp 版
1、下載UEditor後，解壓，把它放到工程裡，還有它的Jar包也要放進去，1.4.3.1結構是這樣的 (現在js 中有一處錯誤,不影響)
//2. 開始從前端配置介紹. 2.新建一個 html頁面.引入ueditor的js. 注意引入的順序.
程式碼: <!-- 配置檔案 -->

<scripttype="text/javascript"src="${ctx}/static/ueditor/ueditor.config.js"></script> <!-- 編輯器原始碼檔案 --> <scripttype="text/javascript"src="${ctx}/static/ueditor/ueditor.all.js"></script> <scripttype="text/javascript"charset="utf-8"src="${ctx}/static/ueditor/lang/zh-cn/zh-cn.js"></script> 2.2 初始化 富文字編輯器容器 <textareaname="editor"id="editor"style="width:76%;height:400px"></textarea> <scripttype="text/javascript"> varue= UE.getEditor('editor',{ }); UE.Editor.prototype._bkGetActionUrl=UE.Editor.prototype.getActionUrl; UE.Editor.prototype.getActionUrl=function(action){ if(action =='uploadimage'||action=='uploadscrawl'|| action =='uploadimage') {//圖片上傳的ctl return'/knowsource/action'; }else if(action =='uploadvideo'){//執行上傳視訊的action名稱 return'/knowsource/actionForVideo'; }else{ return this._bkGetActionUrl.call(this, action); }}; </script> 2.3 在初始化富文字的 下面 寫這段程式碼.(紅線內的內容)
var ue = UE.getEditor('editor'); 就是建立面板用的，一定要有；如果不使用自定義上傳，那麼下面的也就不需要了，只要建立面板那一句就夠了。 作用: UE.Editor.prototype._bkGetActionUrl=UE.Editor.prototype.getActionUrl; 是用來獲取Action的，照寫就行，然後就是下面的 UE.Editor.prototype.getActionUrl=function(action){....}  這裡面的if語句，就是用來設定自定義action的，這裡叫Controller. 2.4 修改 ueditor下jsp裡面的config.json 你會發現，下面有個imageActionName，這個xxxxActionName，開始以為是需要把自定義上傳Controller設定在這邊，所以我點選上傳的時候就報，錯誤的Action還是未知的Action，實際上這是UEditor預設的Action，上面我們有看到 if (action == 'uploadimage' ||action== 'uploadscrawl' || action == 'uploadimage') {....} else if(action =='uploadvideo') {....} else if(action == 'listimage'){....} else{returnthis._bkGetActionUrl.call(this, action);}} if語句裡面的這些，對應的就是預設的action名稱，說到這裡，大家應該知道了吧， 要自定義上傳什麼就在這個script裡面加if語句來判斷即可，實在沒有，它就返回       this._bkGetActionUrl.call(this,action);  這個東西我想你應該要有，否則沒找到你設定的action它本地也上傳不了。 例如:現在 上面我自己定義,圖片上傳的control 請求 的/knowsource/action 視訊上傳的請求路徑 /knowsource/actionForVideo
上傳視訊路徑
下面會介紹,怎麼定義上傳 圖片和視訊的 請求路徑. //圖片上傳路徑. config.json檔案中.imageActionName 命名要和 上面介紹if 中action 名稱一致,不認進不去判斷. 就不會自己設計的請求路徑 傳送請求. 單個圖片上傳.一般不會有太多問題. 介紹一下多圖片上傳,和視訊上傳的 注意修改的位置. =============多圖片上傳 ==開啟ueditor/dialogs/image/image.js 檔案=============== 696行. 修改程式碼 uploader.on('all',function(type, files) { switch(type) { case'uploadFinished': setState('confirm', files); break; case'startUpload': /* 新增額外的GET引數 */ varparams= utils.serializeParam(editor.queryCommandValue('serverparam')) || '', // url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + 'encode=utf-8&' + params); url=utils.formatUrl(actionUrl);//TODO 修改多圖片上傳路徑 uploader.option('server',url); setState('uploading', files); break; case'stopUpload': setState('paused', files); break; } });

=============視訊上傳 ==開啟ueditor/dialogs/video/video.js 檔案=============== 707行 uploader.on('all',function(type, files) { switch(type) { case'uploadFinished': setState('confirm', files); break; case'startUpload': /* 新增額外的GET引數 */ varparams= utils.serializeParam(editor.queryCommandValue('serverparam')) || '', /* url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + 'encode=utf-8&' + params);*/ url=utils.formatUrl(actionUrl); uploader.option('server',url); setState('uploading', files); break; case'stopUpload': setState('paused', files); break; } }); =====================後端程式碼==================== pom依賴 <!-- ueditor 依賴包-start--> <dependency> <groupId>cn.songxinqiang</groupId> <artifactId>com.baidu.ueditor</artifactId> <version>1.1.2-offical</version> </dependency> <dependency> <groupId>org.json</groupId> <artifactId>json</artifactId> <version>20160810</version> </dependency> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>2.4</version> </dependency> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency> <dependency> <groupId>commons-codec</groupId> <artifactId>commons-codec</artifactId> <version>1.9</version> </dependency> <!-- ueditor 依賴包-end--> ===============Controller============= packagecom.ampmind.front.crm.web.controller; importcom.ampmind.framework.api.base.Response; importcom.ampmind.service.crm.rpc.KnowledgeBaseService; importcom.ampmind.service.crm.rpc.protocol.KnowledgeBaseModel; importcom.ampmind.service.ois.clinet.OisHelper; importcom.ampmind.service.ois.constant.ChannelType; importcom.ampmind.service.ois.model.ResponseModel; importcom.ampmind.service.ois.rpc.OisService; importcom.ampmind.service.ois.utils.OisUtil; importorg.slf4j.Logger; importorg.slf4j.LoggerFactory; importorg.springframework.beans.factory.annotation.Autowired; importorg.springframework.http.MediaType; importorg.springframework.stereotype.Controller; importorg.springframework.web.bind.annotation.RequestMapping; importorg.springframework.web.bind.annotation.RequestMethod; importorg.springframework.web.bind.annotation.ResponseBody; importorg.springframework.web.multipart.MultipartFile; importorg.springframework.web.multipart.MultipartHttpServletRequest; importorg.springframework.web.multipart.MultipartRequest; importjavax.servlet.http.HttpServletRequest; importjava.io.IOException; importjava.io.InputStream; importjava.util.HashMap; importjava.util.Map; importjava.util.Set; /** * Ueditor 百度富文字編輯器,(demo) * * 作用:提供開發百度富文字使用 * *@Auther:WangYongKun *@Date2017/11/13 0013 */ @Controller @RequestMapping("knowsource") public classUeditorControllerextendsCrmBasicController { private finalLogger logger= LoggerFactory.getLogger(Uedi