百度Web富文本編輯器ueditor在ASP.NET MVC3項目中的使用說明

 

======================================================================

 

【百度Web富文本編輯器ueditor在ASP.NET MVC3項目中的使用說明】

 

                                      ----by 夏春濤 2014-02-20

 

======================================================================

 

運行環境：

    ueditor-v1.3.6-utf8-net，VS2010旗艦版+SP1，ASP.NET MVC3。

 

    將下載後的ueditor壓縮包的全部文件拷貝到/Content/ueditor目錄中。

 

 

1.WEB視圖頁面中以下配置，運行時應能看到完整的富文本編輯器界面：

 

    <!-- ******************************************************************** -->

    <link rel="stylesheet" href="@Url.Content("~/Content/ueditor/themes/default/css/ueditor.min.css")" type="text/css" />

    <script src="@Url.Content("~/Content/ueditor/ueditor.config.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Content/ueditor/ueditor.all.min.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Content/ueditor/lang/zh-cn/zh-cn.js")" type="text/javascript"></script>

    <!-- ******************************************************************* -->

 

    ..

 

    @Html.TextAreaFor(p => p.Content)

    ..

 

    <script type="text/javascript">

        UE.getEditor("Content");//初始化富文本編輯器

    </script>

 

2.修改ueditor.config.js內容，在函數第一行增長ueditor目錄路徑配置，該路徑是相對於網站根目錄的,

 

  如是http://www.xxx.com/Content/ueditor/ 則爲 /Content/ueditor/。

 

  配置好後插入圖片等操做的對話框顯示樣式會變得正常。

 

    window.UEDITOR_HOME_URL = "/Content/ueditor/";

 

3.根據須要修改ueditor.config.js內容，如下列舉了一些經常使用項：

 

   , initialFrameWidth: 760    //編輯器寬度

   , initialFrameHeight: 400   //編輯器高度

   , wordCount: false          //編輯器下方顯示控制：不讓編輯器統計字數

   , elementPathEnabled: false //編輯器下方顯示控制：不顯示元素路徑

   , autoHeightEnabled: false  //不讓編輯自動長高（這樣，當內容較多時會出現上下滾動條，而不至於把網頁撐大）

 

4.解決「檢測到有潛在危險的 Request.Form 值」的問題。

 

  錯誤提示：

  從客戶端(Content="<p><span style="colo...")中檢測到有潛在危險的 Request.Form 值。

 

  緣由說明：

  由於富文本編輯器產生的內容中會包含<>"等特殊字符，服務器默認進行內容安全檢測並阻止代碼運行。

 

  解決辦法：

  爲Action添加屬性：[ValidateInput(false)]，示例：

  [HttpPost]

  [ValidateInput(false)] //不進行內容檢測

  public ActionResult NewsEdit(News newsModel)

  {

      //...

  }

 

5.★解決文件不能上傳的問題。

 

  錯誤提示：

  Url: http://localhost:11685/Content/ueditor/net/fileUp.ashx

  Description: e:\咱們的項目\BetterMIS\project\BetterMIS.WebViews\Content\ueditor\net\fileUp.ashx(34): error CS0433:

  類型「Uploader」同時存在於「c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\root\98d019ee\65f02c2e\App_Web_uploader.cs.d026ad6.qqgskfar.dll」

  和「c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\root\98d019ee\65f02c2e\assembly\dl3\a6a5387f\ee12af20_0d2ecf01\BetterMIS.WebViews.DLL」中。

 

  解決辦法：

  ueditor的net文件夾下的Uploader.cs文件的生成操做屬性默認是「編譯」，只須要將這個文件的生成操做屬性改成「內容」，

  上傳圖片的功能就能夠正常成功使用了！[源自：http://www.cnblogs.com/beyond1983/archive/2013/02/26/2933744.html]

 

  緣由剖析：

  由於Ueditor的示例是針對Asp.net網站（不是MVC），不須要編譯成DLL，直接把示例放到IIS下就可使用啦。

 

6.★解決上傳圖片時總提示「選擇保存目錄：正在讀取目錄...」的問題。

 

  問題現象補充：若是選擇本地圖片後，點擊「開始上傳」老是提示「請等待保存目錄就緒」。

 

  錯誤提示：

  Url: http://localhost:11685/Content/ueditor/net/imageUp.ashx?fetch=1

  Description: e:\咱們的項目\BetterMIS\project\BetterMIS.WebViews\Content\ueditor\net\imageUp.ashx(18): error CS0433:

  類型「Config」同時存在於「c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\root\98d019ee\65f02c2e\App_Web_config.cs.d026ad6.storkrj4.dll」

  和「c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files\root\98d019ee\65f02c2e\assembly\dl3\a6a5387f\02a91fba_162ecf01\BetterMIS.WebViews.DLL」中。

 

  解決辦法（緣由同上）：

  ueditor的net文件夾下的Config.cs文件的生成操做屬性默認是「編譯」，只須要將這個文件的生成操做屬性改成「內容」。

 

7.★解決沒法正常顯示剛剛上傳的圖片的問題。

 

  問題現象：

  成功上傳一張圖片，插入到編輯器中，可是沒法正確顯示剛剛上傳的圖片。

 

  緣由剖析：

  查看html源碼能夠發現圖片路徑中，upload1後面有2個/，手動刪除一個後，返回查看，圖片能夠正常顯示了。

 

  解決辦法1：

  在imageUp.ashx文件中找到代碼：

  info = up.upFile(context, path + '/', filetype, size);

  把把+'/'給刪除掉，即：

  info = up.upFile(context, path, filetype, size);

 

  解決辦法2：

  在Uploader.cs文件中找到代碼（在upFile函數中）：

  pathbase = pathbase + "/";

  修改成：

  pathbase = pathbase.TrimEnd('/') + "/";

  這樣，能夠完全解決相似問題，由於ueditor的上傳功能都是調用Uploader類實現的。

 

8.修改上傳文件的路徑：

 

  （1）圖片上傳路徑。修改Config.cs文件：

       將

       public static string[] ImageSavePath = new string[] { "upload1", "upload2", "upload3" };//即ueditor/net/upload1等目錄

       改成：

       public static string[] ImageSavePath = new string[] { "upload/image" };//即圖片上傳到ueditor/net/upload/image目錄中

 

       另，對於【圖片搜索】中的圖片保存路徑。修改getRemoteImage.ashx文件：

       將

       string savePath = "upload/";

       改成：

       string savePath = "upload/image/"; //即圖片保存到ueditor/net/upload/image目錄中

       補充說明：對於【圖片搜索】中的圖片保存，系統會自動在savePath目錄下再以日期爲名建立文件夾來保存文件。

 

  （2）附件（及視頻文件）上傳路徑。修改fileUp.ashx文件：

       將

       String pathbase = "upload/";

       改成：

       String pathbase = "upload/file";//即附件上傳到ueditor/net/upload/file目錄中

 

  （3）塗鴉上傳路徑。修改scrawUp.ashx文件：

       一是將

       string pathbase = "tmp/";  

       改成：                 

       string pathbase = "upload/tmp/";

 

       二是將

       string pathbase = "upload/";           

       string tmpPath = "tmp/";                   

       改成：

       string pathbase = "upload/scraw/";

       string tmpPath = "upload/tmp/";

 

       補充說明：系統會自動在pathbase目錄下再以日期爲名建立文件夾來保存文件。

 

9.注意將upload目錄的訪問權限放開（右鍵文件夾->屬性->安全->編輯，便可設置），容許everyone用戶徹底控制（固然安全一點應該只容許IIS_WPG帳戶徹底控制便可）。

 

======================================================================

 

                                  ----by 夏春濤 20140220

 

======================================================================