天天看點

Ueditor百度富文本編輯器

一、配置 1、maven配置:

Ueditor百度富文本編輯器
Ueditor百度富文本編輯器

注:注釋掉的jar包配置是因為使用百度提供的源碼時無法做到上傳圖檔等功能,是以需要修改源碼自己配置 2、web項目lib下載下傳jar包: 3、前端配置檔案 項目結構:

Ueditor百度富文本編輯器
Ueditor百度富文本編輯器
Ueditor百度富文本編輯器

将config.json檔案放到resource下,ueditor的js檔案放入js目錄下,後端的java配置代碼可随意放入 修改 ueditor.config.js檔案的配置:

Ueditor百度富文本編輯器

此處路徑換為項目中ueditor的css樣式檔案路徑

Ueditor百度富文本編輯器
Ueditor百度富文本編輯器

此處url換為自己寫的上傳圖檔接口讀取配置檔案的路徑,因為在上傳圖檔時ueditor會先去讀取上傳圖檔的配置檔案,此操作需自己定義路徑代碼讀取config.json檔案 4、源碼修改 因為是springboot項目,在本地啟動時tomcat加載的是一個war包,用源碼中的方式是可以加載找到config.json檔案的,但是當springboot項目打包線上上測試、生産環境時因springboot項目的包是jar包,此時無法在jar包中擷取到resource下的config.json檔案,隻能通過流的形式将config.json檔案讀出。 BinaryUploader:

Ueditor百度富文本編輯器

此處将原有的fileStream注釋掉,因原有的request在springboot項目無法擷取到位元組流對象,需要使用自定義的 ConfigManager:

Ueditor百度富文本編輯器

使用類加載器後的resource下的config.json的位址,遵循源碼規則将此位址傳回。

Ueditor百度富文本編輯器

将config.json檔案以流的形式讀出來,然後傳回,至此源碼修改完畢。 5、前端頁面應用 引入js檔案:

Ueditor百度富文本編輯器

根據目前頁面富文本框做微調:

Ueditor百度富文本編輯器

注:此處的action實際的值是在config.json檔案中定義的,可根據自己需要替換 在此處因隻用到了上傳圖檔,如果是上傳圖檔将實際的上傳位址傳回給ueditor,注此上傳圖檔的位址是自己寫的controller接收圖檔位址

Ueditor百度富文本編輯器

因為在實際的開發中圖檔、視訊等資源都有單獨的資源伺服器,資源伺服器接收圖檔的接口等是公共接口,為了适應接口是以此controller是将前端接收的圖檔流經過處理轉換為接口可處理的形式,然後在此controller中調用遠端伺服器上傳圖檔。 注意:因ueditor上傳圖檔隻識别源碼自定義好的傳回值,是以在此controller需特定處理,将傳回值設定為ueditor可識别的傳回結果。

Ueditor百度富文本編輯器

此處調用遠端伺服器是通過springcloud的feignclient服務間調用,将file傳給遠端伺服器接口。  

轉載于:https://www.cnblogs.com/fatTmonkey/p/10641288.html