前言
最近在項目中使用了百度UEditor富文本編輯器，配置UEditor過程中遇到了幾個問題，在此記錄一下解決方案和使用方法，避免以后使用UEditor出現類似的錯誤。
基本配置
一、下載UEditor.NET版本開發包。
UEditor可以到 http://ueditor.baidu.com/website/download.html#ueditor 進行下載，我們這里選用1.4.3.3 .NET版本。
二、把UEditor開發包放到項目里面。
1、新建一個ASP.NET MVC 4應用程序
2、選擇基本項目模板。
3、把開發包的必要的文件放到項目里面。
首先我們在項目Script目錄下新建一個ueditor文件夾用來保存圖1所示的JS文件，然后在項目根目錄創建一個Common文件夾用來保存圖2所示的后台處理文件。
圖1
圖2
4、在Views=>Shared=>_Layout.cshtml文件里面引入UEditor必要的JS文件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> @RenderBody() @Scripts.Render("~/bundles/jquery") <script src="~/Scripts/ueditor/ueditor.config.js"></script> <script src="~/Scripts/ueditor/ueditor.all.js"></script> @RenderSection("scripts", required: false) </body> </html>
注意：ueditor.config.js和ueditor.all.js前后順序不能寫反了
5、創建UEditorController並添加視圖。
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace UEditorDemo.Controllers { public class UEditorController : Controller { [ValidateInput(false)] public ActionResult Index(FormCollection fc) { var content = fc["container"]; return View(); } } }
注意：在Index Action上面要加上[ValidateInput(false)]特性
注意：在添加Index視圖的時候需要引入_Layout.cshtml母版頁。
在Index視圖里面添加textarea標簽和相關JS代碼用來顯示編輯器，更多配置可參考ueditor.config.js里面的配置說明。
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } @using (Html.BeginForm("Index", "UEditor")) { <textarea id="container" name="container"></textarea> <br /> <input type="submit" value="提交" /> } @section scripts{ <script> $(function () { var editor = UE.getEditor('container', { minFrameHeight: 500, initialFrameHeight: 500, autoHeightEnabled: true, }); }); </script> }
到目前為止，正常情況下，頁面上已經能顯示出來編輯器的樣子了。現在我們輸入“測試”內容，點擊提交按鈕，后台也能獲取到剛才輸入的“測試”內容，如圖所示：
配置圖片上傳
在基本配置中，我們可以把文本內容上傳到服務器，這時候我們想上傳一張圖片到服務器，發現上傳圖片的按鈕是禁用狀態，並且在打開多圖上傳對話框=>本地上傳選項卡顯示：后端配置項沒有正常加載。這是為什么呢？通過查找文檔發現是因為沒有配置ueditor.config.js文件的serverUrl屬性，現在讓我們動手配置一下試試吧。
1、配置serverUrl屬性。
由於我們的controller.ashx放在Common文件夾下面，所以我們打開ueditor.config.js文件把屬性serverUrl改為：
serverUrl: "/Common/controller.ashx"
2、配置圖片訪問路徑前綴和上傳保存路徑。
為了能夠讓圖片在編輯器里面顯示，我們還需要配置圖片訪問路徑前綴和上傳保存路徑。
1)打開Common文件夾下面的config.json文件，我們把imageUrlPrefix屬性改為：
"imageUrlPrefix": "http://192.168.199.171/UploadFiles/", /* 圖片訪問路徑前綴 */
注意：需要在iis默認站點里面添加一個別名為“UploadFiles”的應用程序，並指定相應的物理路徑，上傳的圖片才能在編輯器里面顯示。
2)把imagePathFormat屬性修改為：
"imagePathFormat": "/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
注意：在upload路徑前面加了一個“/”。
現在應該可以上傳圖片並在編輯器里面進行顯示了，如下圖所示：
圖片上傳進階
在實際的項目中，我們上傳圖片可能保存在別的盤符下面以及訪問圖片的域名也需要改變，一般是后台可配的，這時候我們可以通過修改后台代碼實現這種需求。
1、修改UploadHandler.cs文件。
打開Common=>UploadHandler.cs文件找到下面的代碼，修改LocalPath和Result.Url變量即可得到想要的效果。
var savePath = PathFormatter.Format(uploadFileName, UploadConfig.PathFormat); //修改地方1 var localPath = Server.MapPath(savePath); try { if (!Directory.Exists(Path.GetDirectoryName(localPath))) { Directory.CreateDirectory(Path.GetDirectoryName(localPath)); } File.WriteAllBytes(localPath, uploadFileBytes); Result.Url = string.Format("http://192.168.199.171/sowerestres/Notice/{0}", savePath); //修改地方2 Result.State = UploadState.Success; } catch (Exception e) { Result.State = UploadState.FileAccessError; Result.ErrorMessage = e.Message; } finally { WriteResult(); }
2、修改ListFileHandler.cs文件。
打開Common=>ListFileHandler.cs文件找到下面的代碼，修改LocalPath和PathToList變量即可得到想要的效果。
public ListFileManager(HttpContext context, string pathToList, string[] searchExtensions) : base(context) { this.SearchExtensions = searchExtensions.Select(x => x.ToLower()).ToArray(); this.PathToList = "http://192.168.199.171/sowerestres/Notice/"; //修改地方1 }
try { var localPath = Server.MapPath(PathToList); //修改地方2 buildingList.AddRange(Directory.GetFiles(localPath, "*", SearchOption.AllDirectories) .Where(x => SearchExtensions.Contains(Path.GetExtension(x).ToLower())) .Select(x => PathToList + x.Substring(localPath.Length).Replace("\\", "/"))); Total = buildingList.Count; FileList = buildingList.OrderBy(x => x).Skip(Start).Take(Size).ToArray(); } catch (UnauthorizedAccessException) { State = ResultState.AuthorizError; } catch (DirectoryNotFoundException) { State = ResultState.PathNotFound; } catch (IOException) { State = ResultState.IOError; } finally { WriteResult(); }
以上是本人在.net mvc項目中使用ueditor編輯器的簡單配置，歡迎轉載和使用。
同時附上Demo下載地址：http://pan.baidu.com/s/1nvc0hAx （提取碼：61l0）