使用UMeditor富文本編輯器上傳圖片

注：本文系做者原創，但可隨意轉載。

最近寫本身的網站玩兒，寫到博客的部分，打算使用UMeditor，由於以前也用過（可是好像沒實現圖片上傳的功能），感受用起來還比較簡單。

不過仍是折騰了一下午。。。遇到了不少問題，最麻煩的地方莫過於文檔和實際代碼不統一，致使文檔的可信度大大下降，只能靠本身一步步跟蹤調試。

好比，文檔中js的配置文件給了兩個節點 

{ "imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", "imageUrlPrefix": "/myapp/ueditor/net/", }

可是實際下載下來的UMeditor代碼的js配置文件中給的節點是，

//圖片上傳配置區

,imageUrl:URL+"net/imageUp.ashx" //圖片上傳提交地址
,imagePath:URL + "net/" //圖片修正地址，引用了fixedImagePath,若有特殊需求，可自行配置
,imageFieldName:"upfile" //圖片數據的key,若此處修改，須要在後臺對應文件修改對應參數

 

 

問題1、

下載後，直接引用Umeditor，目錄結構大體以下圖，在ASP.NET MVC4項目中，把整個umeditor文件夾放在Scripts下。編輯博客的頁面已經寫好了，啓動程序，進入編輯頁面點擊上傳圖片，進行上傳，報錯。

說明: 在編譯向該請求提供服務所需資源的過程當中出現錯誤。請檢查下列特定錯誤詳細信息並適當地修改源代碼。 

編譯器錯誤消息: CS0433: 類型「Lyosaki.Site.Uploader」同時存在於「c:\Users\LiuYu\AppData\Local\Temp\Temporary ASP.NET Files\root\0d2fa058\84067035\App_Web_uploader.cs.c95a9a5.dyxu9rbj.dll」和「c:\Users\LiuYu\AppData\Local\Temp\Temporary ASP.NET Files\root\0d2fa058\84067035\assembly\dl3\3147e142\84a16ccb_7a2ad101\Lyosaki.Site.DLL」中

 

解決方案：由於在imageUp.ashx文件頭部有一句 <%@ Assembly Src="Uploader.cs" %>， 但給出的是相對路徑，系統在默認路徑下找到了多個程序集致使編譯失敗。這裏直接把這一句去掉，另外 Uploader.cs沒有命名空間，這裏加上命名空間Lyosaki.Site,而後直接在imageUp.ashx裏邊using Lyosaki.Site;便可。

 

問題2、

在不改變現有目錄結構和默認圖片上傳路徑的狀況下，圖片上傳地址形如：~/Scripts/umeditor/net/upload/yyyy-MM-dd/Guid.jpg。

因此，我想優化文件組織結構，改變圖片存儲位置到~/Upload/yyyy-MM-dd/Guid.jpg。順便把ashx和cs文件拿出來，放在Scripts文件夾下實在變扭。

這裏調試了半天，由於圖片上傳路徑的拼接邏輯實在是混亂，在c#兩個文件裏有配置，js裏也有相關配置，而後c#上傳完後還要回調js又傳了個路徑回去。。。

 

解決方案：在根目錄下新建Ashx文件夾，把兩個ashx文件拷過去。在根目錄新建Helper文件夾，把Uploader.cs拷貝進去。

在imageUp文件ProcessRequest方法裏修改pathbase爲，

//上傳配置
string pathbase = "/Upload/";。

表明要上傳文件到 根目錄的Upload文件夾下，可是不能寫成"~/Upload"，由於這裏路徑後面會回調到js，js沒法解析~。

在umeditor.config.js文件中，將圖片上傳配置修改成：

//圖片上傳配置區
, imageUrl: "/Ashx/imageUp.ashx" //圖片上傳提交地址
, imagePath: "" //圖片修正地址，引用了fixedImagePath,若有特殊需求，可自行配置
, imageFieldName: "upfile" //圖片數據的key,若此處修改，須要在後臺對應文件修改對應參數

 

問題3、

點擊圖片上傳後，彈窗如圖，因爲頁面較長，能夠上下滾動，但此時，整個「圖片」彈窗是Fixed的，會隨頁面滾動。。。但"本地上傳","網絡圖片"這兩個pannel，以及中間的小電腦圖片和下面那一行文字，確是relative的，滾動到下面，他們不會跟着滾動。。。

致使有幾回我滾動到最下面而後點圖片上傳，卻看不到中間的內容，還覺得是網絡問題沒加載出來。。。

 

解決方案：

在umeditor.css裏面加入下面幾行樣式便可。

.edui-tab-pane {
position: fixed !important;
}

.edui-image-dragTip, .edui-image-upload1 {
left: 50% !important;
position: fixed !important;
}

 

目前暫時尚未遇到其餘問題，但打算在其餘地方複用一下它的上傳彈窗和後臺邏輯，先研究研究可否實現。