有一天老板突然找我讓我改富文本（一臉懵逼，不過也不能推啊默默地接下了），大家都知道現在的富文本視頻功能都是只有上傳鏈接的沒有從本地上傳這一說（就連現在的csdn的也是）于是我找了好多個，最終發現百度的ueditor可以。經過幾天的日夜，甚至犧牲了周末休息時間開始翻閱資料。。。

廢話不多說，開始教程：

第一步：

去ue官網下載他的源碼

第二步：

解壓下載的源碼（下載可能會慢，好像需要翻墻下載）然后打開項目把源碼拖進項目的resources/static中去

第三步

就是重點了由于springboot現在默認是不支持jsp的所以jap下的controller.jsp 運行后springboot是找不到路徑的，就會出現富文本存在，而上傳圖片或者視頻的地方會顯示（后端未配置）

這里要說下：下面就你就要把源碼里面的jsp下有4個jar包，你需要復制到項目中然后add進去，或者你找maven地址也可，但是不建議因為浪費時間。

第四步：由于無法獲取地址，那么我們就自己寫一個controller進行映射，怕大家懶，我這里拷貝我的提供使用

@RestController@RequestMapping('/Test')public class UeTestController { /** * 上傳配置：即不走config.json，模擬config.json里的內容，解決后端配置項不正確，無法上傳的問題 * @return */ @RequestMapping(value = '/ueditor/config',method = RequestMethod.GET) @ResponseBody public String uploadConfig(String action,String noCache) { //注意以下：imageActionName 根據這個ActionName的名字來上傳接口：比如我現在設置的上傳文件接口為下面那個：multipleCarouselFiles //imageUrlPrefix：是【點擊確認之后，加載的資源路徑】所屬服務器中獲取資源 System.out.println('進入config===================='); System.out.println('action='+action+' callback='+noCache); String s = '{n' +' 'basePath': 'C:/',n' +' 'imageActionName': '/Test/multipleCarouselFiles',n' +''imageFieldName': 'upfile', n' +''imageMaxSize': 2048000, n' +''imageAllowFiles': ['.png', '.jpg', '.jpeg', '.gif', '.bmp'], n' +''imageCompressEnable': true, n' +''imageCompressBorder': 1600, n' +''imageInsertAlign': 'none', n' +''imageUrlPrefix': 'http://localhost:8082/images/upload',n' +''imagePathFormat': '/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}', /* 上傳視頻配置 */n' +' 'videoActionName': '/Test/multipleCarouselFiles', /* 執行上傳視頻的action名稱 */n' +' 'videoFieldName': 'upfile', /* 提交的視頻表單名稱 */n' +' 'videoPathFormat': '/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}', /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */n' +' 'videoUrlPrefix': 'http://localhost:8082/images/upload', /* 視頻訪問路徑前綴 */n' +' 'videoMaxSize': 102400000, /* 上傳大小限制，單位B，默認100MB */n' +' 'videoAllowFiles': [n' +' '.flv', '.swf', '.mkv', '.avi', '.rm', '.rmvb', '.mpeg', '.mpg',n' +' '.ogg', '.ogv', '.mov', '.wmv', '.mp4', '.webm', '.mp3', '.wav', '.mid']/* 上傳視頻格式顯示 */ }'; return s; } /** * Ueditor上傳文件 * 這里以上傳圖片為例，圖片上傳后，imgPath將存儲圖片的保存路徑，返回到編輯器中做展示 * @param file * @return */ @RequestMapping(value = '/multipleCarouselFiles',method = RequestMethod.POST) @ResponseBody public String uploadimage(@RequestParam('upfile') MultipartFile file, HttpServletRequest request, HttpServletResponse response) { //服務協議 String Scheme =request.getScheme(); //服務器名稱 String ServerName= request.getServerName(); //服務器端口 int Port= request.getServerPort(); String url=Scheme+'://'+ServerName+':'+Port; Results results=new Results(); //判斷非空 if (file.isEmpty()) { return '上傳的文件不能為空'; } try { //1、先獲取jar所在同級目錄 File path = new File(ResourceUtils.getURL('classpath:').getPath()); if(!path.exists()){path = new File(''); } System.out.println('獲取jar所在同級目錄 path:'+path.getAbsolutePath()); //2、如果上傳目錄為/static/images/upload/，則可以如下獲取： File upload = new File(path.getAbsolutePath(),'static/images/upload/New_img/'); if(!upload.exists()){upload.mkdirs(); } System.out.println('上傳目錄為/static/images/upload/中---upload url:'+upload.getAbsolutePath()); //測試MultipartFile接口的各個方法 System.out.println('[文件類型ContentType] -:'+file.getContentType()); System.out.println('[文件組件名稱Name] -:'+file.getName()); System.out.println('[文件原名稱OriginalFileName] -:'+file.getOriginalFilename()); System.out.println('[文件大小] -:'+file.getSize()); System.out.println(this.getClass().getName()+'圖片路徑：'+upload); // 如果不存在該路徑就創建 String uploadPath=upload+''; File dir = new File(uploadPath + file.getOriginalFilename()); // 文件寫入 file.transferTo(dir); //在開發測試模式時，得到的地址為：{項目根目錄}/target/static/images/upload/ //在打包成jar正式發布時，得到的地址為：{發布jar包目錄}/static/images/upload/ results.setMessage('上傳單個文件成功'); } catch (Exception e) { e.printStackTrace(); results.setMessage('上傳單個文件失敗'); } String result = ''; if(!file.isEmpty()) { String originalFileName = file.getOriginalFilename(); // 這里寫你的文件上傳邏輯 // String imgPath = fileUtil.uploadImg(file); String imgPath = '/New_img/'+originalFileName; result = '{n' + ' 'state': 'SUCCESS',n' + ' 'url': '' + imgPath + '',n' + ' 'title': '' + originalFileName + '',n' + ' 'original': '' + originalFileName + ''n' + '}'; } return result; }}

下面附上一個老哥給我發的上傳文件用的一個類Results

import com.fasterxml.jackson.annotation.JsonProperty;/** ueditor 使用類* */public class Results { private Object Data; private String Message; private boolean Status; @Override public String toString() { return 'Results{' +'Data=' + Data +', Message=’' + Message + ’’’ +', Status=' + Status +’}’; } @JsonProperty('Data') public Object getData() { return Data; } public void setData(Object data) { Data = data; } @JsonProperty('Message') public String getMessage() { return Message; } public void setMessage(String message) { Message = message; } @JsonProperty('Status') public boolean isStatus() { return Status; } public void setStatus(boolean status) { Status = status; }}

下面就要修改ueditor中最重要的映射地址位置（ueditor.config.js）也就是說他為什么能加載你寫的testcontroller就是這個地方在起作用（附圖）：

如果你從上面跟我路徑一直，可以直接復制我的地址此時你在運行項目就會進入自己寫的controller上面其實我都一步寫好了，其實在我做的過程中還遇到了

（圖是我找的，但是問題一模一樣），具體什么原因就是因為沒有配置好圖片上傳的路徑說到這我要提一下你引入富文本的地方，需要做一個這個配置

其他位置不要動就可以，到這夠詳細吧，做這個真是做的我腦袋都大了，好在有一個老哥幫了我一把，非常感謝，還有什么問題留言就可，看到就會回

到此這篇關于詳解springboot整合ueditor踩過的坑的文章就介紹到這了,更多相關springboot整合ueditor內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！