使用百度UMeditor富文字編輯器，修改自訂圖片上傳，修改源碼

標籤：conf   源碼   內容   mvc   結構   設定檔   原因   editor   jsp   

富文字編輯器，不多說了，這個大家應該都用到過，至於用到的什麼版本，那就分很多種

CKEditor：很早以前叫FCK，那個時候也用過，現在改名了，比較流行的一個外掛程式，國外很多公司在用

UEDITOR：百度開發的外掛程式，lite版是UM

EasyUI編輯器：用easyUI的都懂，基本上肯定用到

其他的富文字編輯器就不說了，前兩個小編我用的比較多

本來我是比較傾向於CKEditor，但是這個外掛程式不支援圖片上傳，圖片功能只能連結過去，而不能在控制項本身中上傳，所以就選擇了UMeditor

為啥選擇UM，不選擇UE，其實都差不多，UM精簡了很多，而且比較小，UE功能太多而且很多東西都用不到

那麼先來說說上傳吧，引入JS什麼的不說了，網上都有

要進行圖片上傳先要定義好靜態目錄，如下：

 

再來看看百度目錄的結構

 

第一個框中是百度自己的上傳，可以不用他，自己自訂上傳，小編用的是springMVC + fastDFS圖片伺服器，只要修改地址就可以直接上傳，相關文章可以參考我以前的部落格

開啟umeditor.config.js這個檔案，這是UM的設定檔，可以自訂很多東西

 

覆蓋原來的imageURL即可，修改為你自己項目中正在使用的圖片上傳介面即可，注意，必須是支援ajax非同步上傳的

那麼好，現在啟動項目測試，圖片上傳是沒有問題，但是圖片展示會有問題，原因是返回的JSON和百度的格式不匹配

那麼怎麼辦，2種做法，適配自己的返回資料格式

或者直接修改百度的js源碼

小編我採用了第二種做法，畢竟自己的資料格式自己最清楚

開啟這個路徑下的image.js

/danger-manager-web/src/main/webapp/WEB-INF/umeditor1_2_2-utf8-jsp/dialogs/image/image.js

找到如下方法

 

這個方法是成功後執行的，，callback是用來展示圖片內容的，我直接修改callback，變更資料格式

 

修改image中的href即可，最終可以展示圖片

 

使用百度UMeditor富文字編輯器，修改自訂圖片上傳，修改源碼