關於editor網頁編輯器ueditor.config.js 配置圖片上傳


最近公司項目在做一個門戶網站,其中新聞和簡介等部分使用到了ueditor編輯器,但是上級明確指示需要圖片上傳這個功能,這時卻發現圖片上傳功能不能正常使用,上傳時一直報錯,網上收了好幾個處理辦法,都說的不夠詳細明了,突然發現ueditor這么強大的工具在開發過程中的致命盲點,很糾結,最終經過很久的糾結和苦思冥想終於解決了該問題,以下是關於ueditor 在web 2.0版本下的問題解決思路和方法,因為經過測試 網上下載的ueditor編輯器在4.0下 問題不大。好了言歸正傳,首先亮出ueditor在我的項目的結構位置:

,這里先說明一下 標示的這些地方的作用,紅框標示的是Ueditor整個文件的位置,紅線標示的 是 配置過程中將會用到的各部分,接下來會一一講解。接下來在亮出原始版本ueditor結構位置:

原始版本ueditor是不能正常上傳圖片的,之所以曬出這兩張圖片是為了更好的進行對比 找出 問題所在,便於分析 你的問題出在哪里。首先問題可以很明確的是程序編譯沒有通過,你按F6進行編譯他提示生成成功,其實不然,接下來我們就來分析哪些地方造成的編譯沒有通過

我們先從上面帶星號這個類開始講:請看以下圖片:,如果不出意外,你正在有這樣的疑問,這個錯誤是怎么產生的,因為我那時就糾結了很久,如果你細心的話你會發現第一張圖片中該文件已經改名為UploaderFile,這是當時最先想到的解決辦法,以為改個名字就能解決 該報錯原因,結果我錯了,(當然改了名字也不影響),那么問題出在哪里呢?其實問題出在頭部引用紅線位置就是問題所在,2.0是不支持Linq的 所以 這句要刪掉,同時引用Linq的還有Config.cs 然后就是上面兩句話,可以看出下面一句話已經在報錯了,這句話為何報錯?因為看程序結構你可以看出Config.cs類和Uploader.cs類本來就在同一個項目中,這里在處理程序中再次引用就相當於原本就編譯了,再編譯一次,所以提示同時存在於.....兩個地方,而為何4.0不報錯,我想應該是4.0在升級后處理了這個邏輯吧!這三句話都必須刪掉

接下來我把imageUp.ashx的代碼貼出來,只要你是ueditor1_3_5-utf8-net這個版本 就沒有問題。

 1 <%@ WebHandler Language="C#" Class="imageUp" %>
 2 using System;
 3 using System.Web;
 4 using System.IO;
 5 using System.Collections;
 6 
 7 public class imageUp : IHttpHandler
 8 {
 9     public void ProcessRequest(HttpContext context)
10     {
11         context.Response.ContentType = "text/plain";
12 
13         //上傳配置
14         int size = 2;           //文件大小限制,單位MB                             //文件大小限制,單位MB
15         string[] filetype = { ".gif", ".png", ".jpg", ".jpeg", ".bmp" };         //文件允許格式
16 
17 
18         //上傳圖片
19         Hashtable info = new Hashtable();
20         Uploader up = new Uploader();
21         
22         string pathbase = null;
23         int path=Convert.ToInt32( up.getOtherInfo(context, "dir"));
24         if (path == 1)
25         {
26             pathbase = "upload/";                  
27             
28         }else{
29             pathbase = "upload1/";
30         }
31         
32         info = up.upFile(context, pathbase, filetype, size);                   //獲取上傳狀態
33         
34         string title = up.getOtherInfo(context, "pictitle");                   //獲取圖片描述
35         string oriName = up.getOtherInfo(context, "fileName");                //獲取原始文件名
36 
37 
38         HttpContext.Current.Response.Write("{'url':'" + info["url"] + "','title':'" + title + "','original':'" + oriName + "','state':'" + info["state"] + "'}");  //向瀏覽器返回數據json數據
39     }
40 
41     public bool IsReusable
42     {
43         get
44         {
45             return false;
46         }
47     }
48 
49 }

 ,接下來在看web.config文件,原始的文件時這樣的:,其實這個文件 在整個問題中沒有太大影響(也就是說不會影響圖片上傳),但是為何又要單獨講一下呢?因為在下這個虧吃的有點大,該文件中targetFramework="4.0"這句話 誤導了我,以至於我一直以為必須要這句話才能在讓該插件正常運行,也就是說,我這里是2.0的 就要把4.0改成2.0 ,網上還有人說把requestValidationMode這部分刪除就行了,等等 到最后我才知道,所有報錯的地方 都只是2.0配置文件不支持的原因,直接刪除即可,當然不刪也不影響,我這里是刪除了的,因為我是一個 完美主義者,不喜歡看到有報錯O(∩_∩)O哈哈~。

好了,進入正題,以上只是解決編譯不通過的問題,其實最為重要的是以下部分ueditor.config.js 這個文件 才是核心啊,現在想想 我被坑了,而且還坑的不淺 我擦!!!

先來看看 原始的 文件在來看看 我配置好的文件:來講講紅色框的問題,先看原始的圖片的最上部分框和我配置好的第一張圖片的框,觀察window.UEDITOR_HOME_URL = "/ManagePage/ueditor"  這部分,原始版本沒有配置,我這里添了的,他的作用是確定ueditor這個插件在你的項目中的位置,沒有這句話會報很多錯,錯誤的中心都是找不到某某文件,現在想想,這句話才是核心啊,

在來看看原始圖片的第二個框:這部分就是配置圖片上傳的地方,注意看  原始版本有些地方被注解了,這些注解會影響圖片上傳彈出框的效果:,這就是被注解的效果,你只用將這部分的注解都去掉就行了,在看看原始圖片的第三個框:其實沒有作用,這部分可以根據你的需求 選擇是否注解,這里不影響圖片上傳,

好了,到此為止 如果你還報以下錯誤:,那么你就可以在imageUp設置斷點監視以下,簡單的說一下這個錯的原因,500 Internal.....錯誤,通常我們會聯想到 編譯錯誤,剛開始的時候我也想到了這個原因,只是不知道如何處理,后來,我們 頭 直接把error 后面那部分復制到瀏覽器的地址中,執行如圖: 根據返回來的 這些字符 我們就能推斷 錯誤中下面那部分的 原因了,是因為上傳成功后url 、title等都為空造成的,解決辦法是:在imageUp 設置斷點監視以下:我的結果是:根據圖中紅色框部分,我們可以推測:傳遞過來的參數是upload1 字符串,這里他進行 Convert.toInt32 當然會報錯,就造成了 上面上傳報錯的情況,解決辦法是:直接把上傳過來的參數作為存儲的地址即可。至此  大功告成了。

如果 你的圖片上傳還出問題 就在百度中收索:ueditor1_3_5-utf8-net .netFramwork 2.0版本 在csdn中 我上傳了 2.0 和 4.0 兩個版本。4.0的 就收ueditor1_3_5-utf8-net .netFramwork 4.0版本   里面有完整配置。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM