目錄

一、序言

二、出現(xiàn)的問題

三、人人開源富文本情況

?四、SpringBoot后端配置

1.關于json文件

2.關于官方提供給SpringBoot的ueditor依賴

五、總結

一、序言

? ? ? ?首先博主第一次開始去使用到人人開源的富文本，在使用時幾個問題解決了一天，如果你也存在我想你可以往下認真看，因為這篇博客是我剛剛解決問題時馬上就寫的總結，首先在使用過程中得到的問題如下，根據這些問題然后一一解決。

二、出現(xiàn)的問題

1.地址配置問題。

2.跨域問題的存在

3.關于忽略的config.json文件（主要）

4.ueditor的jar包問題（關鍵）

三、人人開源富文本情況

? ? ? ?首先肯定是先看前端的配置，第一和第二個問題就在前端這里解決，其他博客我也看了，說實話還是有點沒有重點突出，對于前端我們只要關注一個地方，那就是人人開源給的demo中的ueditor.vue文件，如圖。

? ? ? ?將里面的統(tǒng)一接口改成如下圖所示，一定要使用adornUrl連接后端路由，要不然出現(xiàn)跨域問題，當然路由可以根據你的后端來改，我建議先跟我一樣的。

? ? ? ?到這里人人開源的ueditor配置就結束了，如果要修改其他參數(shù)在ueditor.config.js修改就行，如圖所示。

?四、SpringBoot后端配置

? ? ? ?前端問題好解決，最關鍵的還是在后端SpringBoot這里，首先導入官方的ueditor相關依賴吧，如下：

<dependency>
	<groupId>com.gitee.qdbp.thirdparty</groupId>
	<artifactId>ueditor</artifactId>
	<version>1.4.3.3</version>
</dependency>

1.關于json文件

首先你是否有config.json文件，這個文件我不解釋太多，其實就是關于前端上傳圖片或文件時后端給前端返回一些地址信息給前端的，這個其實不是關鍵原因，但卻有很大影響元素，將這個文件命名config.json，然后保存起來，后期需要訪問這個文件內容，內容如下：

{
  "imageActionName": "uploadimage",
  "imageFieldName": "upfile",
  "imageMaxSize": 2048000,
  "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
  "imageCompressEnable": true,
  "imageCompressBorder": 1600,
  "imageInsertAlign": "none",
  "imageUrlPrefix": "",
  "imagePathFormat": "/ueditor/{time}/{filename}",
  "scrawlActionName": "uploadscrawl",
  "scrawlFieldName": "upfile",
  "scrawlPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
  "scrawlMaxSize": 2048000,
  "scrawlUrlPrefix": "",
  "scrawlInsertAlign": "none",
  "snapscreenActionName": "uploadimage",
  "snapscreenPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
  "snapscreenUrlPrefix": "",
  "snapscreenInsertAlign": "none",
  "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
  "catcherActionName": "catchimage",
  "catcherFieldName": "source",
  "catcherPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
  "catcherUrlPrefix": "",
  "catcherMaxSize": 2048000,
  "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
  "videoActionName": "uploadvideo",
  "videoFieldName": "upfile",
  "videoPathFormat": "/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}",
  "videoUrlPrefix": "",
  "videoMaxSize": 102400000,
  "videoAllowFiles": [
    ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
    ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"],
  "fileActionName": "uploadfile",
  "fileFieldName": "upfile",
  "filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}",
  "fileUrlPrefix": "",
  "fileMaxSize": 51200000,
  "fileAllowFiles": [
    ".png", ".jpg", ".jpeg", ".gif", ".bmp",
    ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
    ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
    ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
    ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
  ],
  "imageManagerActionName": "listimage",
  "imageManagerListPath": "/ueditor/jsp/upload/image/",
  "imageManagerListSize": 20,
  "imageManagerUrlPrefix": "",
  "imageManagerInsertAlign": "none",
  "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
  "fileManagerActionName": "listfile",
  "fileManagerListPath": "/ueditor/jsp/upload/file/",
  "fileManagerUrlPrefix": "",
  "fileManagerListSize": 20,
  "fileManagerAllowFiles": [
    ".png", ".jpg", ".jpeg", ".gif", ".bmp",
    ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
    ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
    ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
    ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
  ]
}

? ? ? ?可以和我一樣把config,json文件放到項目的resources下，創(chuàng)建一個名為ueditor的目錄，名字命名其他也可以，如圖：

2.關于官方提供給SpringBoot的ueditor依賴

? ? ? ?想必很多人都卡在這一個問題，上面都解決了，然后整體來看好像是沒什么問題，這里我重新理一下，首先前端配置如下：

這樣以后前端會發(fā)送一個請求并且如果后端沒有配置這個路由的話會報錯，如下圖：

? ? ? ?請求帶兩個參數(shù)，一個是action，一個是callback。安卓ueditor的情況，action首先傳一個config參數(shù)，后面還有其他參數(shù)比如uploadimage是上傳圖片傳的，config參數(shù)是用于檢查config.json文件內容的，也就是說我們后端得給前端返回config.json文件內容，然后很多朋友代碼應該就和我這個一樣了，如圖：

然后要注意的是前端可能包警告跨域，如圖第三個警告：

? ? ? ?我的解決方案是在SpringBoot的過濾器配置ShiroConfig,java中直接把“/ueditor”路由設置通過，不要攔截，這樣就解決了，如圖：

? ? ? ?解決完這個問題后，前端上傳文件還是提示“后端配置項沒有正常加載，上傳插件不能正常使用”這個，因為這里就會出現(xiàn)一個致命問題了。這里前端已經沒有報錯，也沒有警告了，只有后端的問題了，把后端代碼進行分析，通過日志輸出，如圖代碼：

得到結果如下：

? ? ? ?這個到百度翻譯過來的意思是“配置文件初始化失敗”，果然有問題，然后很多人以為是json文件路徑或內容問題。其實不然，是官方提供的依賴ueditor有問題，把json文件讀取不對，或者不符合要求，?因此我們要重寫ueditor的代碼，不用官方那個依賴了，這個代碼不是我寫是，這里給那個老哥的github源碼附上：

GitHub - llldddbbb/ueditor-test: 很詳細的SpringBoot整合UEditor教程很詳細的SpringBoot整合UEditor教程. Contribute to llldddbbb/ueditor-test development by creating an account on GitHub.https://github.com/llldddbbb/ueditor-test把如下文件都放到你的項目里：

像我這樣把他的ueditor目錄直接復制到項目里：

? ? ? ?當然這樣還沒結束呢，這個老哥的代碼也挺坑的，他的包名和官方的包名一模一樣，因此對于之前用pom文件加載過官方依賴的人來說使用了這個老哥的代碼和沒使用一個樣，所以必須把他所有的文件內容的包都改成你現(xiàn)在項目的ueditor重寫代碼所在的包，如下博主改的：

至此真的算完成解決問題了，得到結果后端日志輸出和前端如下：

? ? ? ?日志輸出就是config.json文件的內容，然后前端也可以選擇圖片了，此時此刻真的很激動吧？其他的關于如何上傳文件，如何接收文件，我就不再細說，就是修改config.json文件內容。?

五、總結

? ? ? ?這里其他的不說，其實最主要的就是跨域警告和重寫官方代碼，整體步驟就是前端的ueditor配置后端得路由，后端把跨域攔截器解決，然后讀取config.json文件，接著就是重寫ueditor代碼就完全解決了（注意那個老哥的代碼包名和官方的一模一樣）。

? ? ? ?至此，依然感謝大家的支持，博主會繼續(xù)努力，繼續(xù)分享！文章來源地址http://www.zghlxwxcb.cn/news/detail-842691.html

到了這里，關于人人開源ueditor富文本+SpringBoot后端，配置問題解決的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！