1. 程式人生 > >Ueditor自定義圖片上傳路徑,以及圖片回顯路徑

Ueditor自定義圖片上傳路徑,以及圖片回顯路徑

最近發現Ueditor有個小bug,每次圖片都上傳到專案路徑下,當重新發佈一個版本後,圖片就沒了,所以決心修改

結構如下:


1. 首先,進入config.json,修改如下:其他的都不改,只改選中部分,這個是圖片訪問路徑字首


我們要關注的是【檔案訪問路徑】和【檔案上傳路徑】

然後,分析就開始了

【分析1】:查詢上傳路徑在哪裡用到了,即【imagePathFormat】,只要找到他,就可以找到上傳的絕對路徑,這樣才可以修改為自己想要的,話不多說,全文查詢【imagePathFormat】,結果如下:


【分析2】:開啟上面查詢到的這個檔案,看了下,程式碼如下,這個類主要獲取json中配置的引數,現在要看在哪呼叫了這個方法,一樣,全文查詢【getConfig】,查詢結果如下:



【分析3】:查詢到如上呼叫該方法的類,我們進去看看他是做什麼的,部分程式碼如下:字面上的意思是,上傳圖片視訊檔案時,執行這個方法,自然而然就知道了, 【state = new Uploader( request, conf ).doExec();】這個就是上傳檔案的方法


【分析4】:我們找到了上傳檔案方法,現在進入該方法,程式碼如下:因為isBase64這個引數配置的是false,所以我們走下面這個方法,繼續進入該方法


我們找到了save方法中關鍵程式碼,如下,框起來的部分為儲存的絕對路徑,關鍵來了,我們知道了儲存的絕對路徑,就很好修改了,修改方案如下:


【最終修改方案】:

1. 首先,進入config.json,修改如下:其他的都不改,只改選中部分,這個是圖片訪問路徑字首

2. 進入controller.jsp,修改如下:讀取當前專案中,圖片上傳的根目錄


3. 在ActionEnter.java中新增構造方法的引數,將圖片儲存的根目錄傳入


4. 修改ConfigManager中這幾個位置



在ConfigManager.getConfig方法中,加入下面一行程式碼


5. 修改BinaryUploader.java中,檔案上傳路徑


到這裡就結束了,現在可以測試下

原來編輯器中存放的都是相對路徑,現在呢


********************************完美顯示********************************

再看看我們的路徑


修改到這裡,你以為結束了嗎?其實我也以為結束了,後來又發現了一個問題

描述:當上傳一個圖片,然後貼上文字之後,圖片路徑變了,變成相對路徑了

原因:UEditor會在貼上時,出發事件,將原來的圖片都抓取到專案路徑下,然後重新整理圖片路徑

經過百度,找到這個:https://www.cnblogs.com/lcchuguo/p/5103893.html

參考這個之後,找到ueditor.all.js下面有個如下程式碼:


將這個地方修改為 return;就可以了,不讓他執行下面程式碼,至此,真的沒問題了

雖然步驟有點多,但是等你知道了問題解決的方式,其實不管什麼問題都是一樣的