ueditor 圖片上傳路徑配置
阿新 • • 發佈:2019-02-16
ueditor的圖片上傳路徑配置檔案是 ueditor/php/config.json
以下是我遇到的一些因為ueditor預設設定引起的圖片上傳路徑配置的問題,特此拿出來與大家分享,如果有說的不對的,歡迎批評指正 一、ueditor 的圖片上傳儲存路徑 預設在網站根目錄下,最前面的 '/' 就是網站根目錄的絕對路徑, 如果把最前面的 '/' 刪掉 改為 './'之類的 那也是 /ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6} 原本ueditor這樣的設定是為了便於專案調取上傳上來的圖片視訊等檔案 然而有些情況下 我們做專案往往客戶只會給我們一個子目錄的許可權 不會給我們根目錄的許可權
這時只要修改上圖的最後一行
"imagePathFormat": "/(你的專案目錄)/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}"
二、ueditor上傳到資料庫的圖片路徑即為上面的"imagePathFormat"
然而這樣的設定會不利於專案的遷移,試想你的資料庫中都是上面"imagePathFormat"這樣絕對定位,如果一旦你的專案目錄發生改變,
那就會出現讀不到圖片的問題。
(ps.當然如果你的圖片位置放在網站根目錄,而且沒有什麼許可權問題,那就沒有什麼問題,下面的內容也可以不用看了)
在我看來,還是不要把圖片上傳的路徑設的太死,設為專案的相對路徑會比較好
以下是我自己想出的解決方法,如果有知道更簡便方法的或者可以重構以下的程式碼,還是希望可以多多指教
var content = ue.getContent();
//獲取編輯器內容
var root1 = UE.htmlparser(content, true);
//將上面獲得的html字串轉換成uNode節點 便於之後進行dom操作
var imgs = root1.getNodesByTagName('img');
//取所有img標籤
//遍歷所有的img標籤 修改src
for (var i in imgs) {
var src = changeImgUrl(imgs[i].getAttr('src'));
imgs[i].setAttr('src', src);
}
//取“imagePathFormat” 中'/ueditor'之後的目錄路徑
function changeImgUrl(string) {
var index=string.indexOf('ueditor');
var result="/"+string.substring(index,string.length);
return result;
}
上面程式碼的邏輯就是通過ueditor 提供的API進行dom操作 修改img的src,
篩選掉'imagePathFormat'中的專案路徑,得到去掉'/ueditor/..'的路徑(當然不要去修改imagePathFormat, 不然你還是會下載到相對於根目錄的路徑下的!)
將修改後的內容提交到資料庫,便於之後進行拼接相對路徑
接下來就要開始獲取專案目錄,準備開始拼接,
不過js沒有可以獲取專案目錄的方法,需要藉助後端語言,如php、java等
(當然如果我說錯了的話,還請指正,共同進步嘛)
這裡我以php為例,來講講如何獲取專案目錄(java肯定也有類似的方法,可惜我才疏學淺,對java著實涉獵有限)
你也可以直接var_dump($_SERVER); 看下里面究竟有哪些東西
通過了解我們可以發現
$_SERVER['PHP_SELF']、$_SERVER['SCRIPT_NAME'] 與 $_SERVER['REQUEST_URI'] 三者非常相似,返回的都是與當前 URL 或 PHP 程式檔案相關的資訊,這可能就使我們需要的專案目錄
我們再來看一看這三個變數的區別
$_SERVER['SCRIPT_NAME']:相對於網站根目錄的路徑及 PHP 程式檔名稱。
$_SERVER['REQUEST_URI']:訪問此頁面所需的 URI
下面是我基於thinkphp做的專案的一個url,學過相關知識的童鞋是不是特別熟悉
http://localhost/guzhen/index.php/Admin/Message/lst?cid=2
分別echo 上面的三個變數
以下是我遇到的一些因為ueditor預設設定引起的圖片上傳路徑配置的問題,特此拿出來與大家分享,如果有說的不對的,歡迎批評指正 一、ueditor 的圖片上傳儲存路徑 預設在網站根目錄下,最前面的 '/' 就是網站根目錄的絕對路徑, 如果把最前面的 '/' 刪掉 改為 './'之類的 那也是 /ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6} 原本ueditor這樣的設定是為了便於專案調取上傳上來的圖片視訊等檔案 然而有些情況下 我們做專案往往客戶只會給我們一個子目錄的許可權 不會給我們根目錄的許可權
分別echo 上面的三個變數
- $_SERVER['PHP_SELF'] 得到:/guzhen/index.php/Admin/Message/lst
- $_SERVER['SCRIPT_NAME'] 得到:/guzhen/index.php
- $_SERVER['REQUEST_URI'] 得到:/guzhen/index.php/Admin/Message/lst?cid=2