最近做一個項目，用到了百度ueditor富文本編輯器，功能強大，在線編輯文檔，上傳圖片\視頻、附件。
MVC 模型的控制器准備：
1、建立模型。 在項目中Model 文件夾中建立 文章 模型，注意如果要渲染的內容 的模型字段需要加上[Datype(Datatype.MultilineText)]數據注解，以便在View中可以被直接被渲染成<textarea>文本域標簽。將public DbSet<Article> Articles 加入到對應的數據庫上下文Context的構造函數中，如使用倉儲模式，需要創建倉儲代碼，代碼如圖
public class Article
{
[Display(Name="文章")]
public int ArticleID { get; set; }
[Display(Name="欄目類別")]
public int CategoryID { get; set; }
[Display(Name="標題")]
[Required]
[StringLength(50)]
public string Title { get; set; }
[Display(Name="正文")]
[DataType(DataType.MultilineText)] //如在視圖中使用強類類型的輔助方法@Html.EditorFor(model =>model),則此字段將被渲染成<textarea>文本域標簽。
public string Content { get; set; }
[Display(Name = "作者")]
[StringLength(20)]
public string AuthorName { get; set; }
[Display(Name = "發表時間")]
// [DataType(DataType.Date)]
// [DisplayFormat(DataFormatString="{0:yyyy-MM-dd}")]
[DataType(DataType.DateTime)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd HH:mm:ss}", ApplyFormatInEditMode = true)]
public DateTime PostTime { get; set; }
public virtual Category Category { get; set; }
//如不直接使用數據庫上下文對象，使用倉儲代碼如下。
public class ArticleService : BaseService<Article>
{
public ArticleService(DbContext dbContext) : base(dbContext) { }
}
2、編譯一次項目，然后在Controller文件中新建控制器，模型選Article,利用腳手架功能自動創建控制器ArticleController和新建、編輯、刪除各種視圖。
百度UEditor的下載和配置：
1、訪問http://ueditor.baidu.com/website/download.html 進入開發版的下載頁面，下載.net UTF-8版本，現在最新的是1.43版。
2、下載后解壓，將文件夾更名為ueditor，則ueditor文件夾里面就是源程序。
3、將此ueditor文件夾復制到自己MVC項目的Content文件中.
4、以下Create視圖和Edit視圖的操作方式完全一樣的。打開Create視圖，將Content字段改成
<div class="form-group">
@Html.LabelFor(model => model.Content, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-6"> //通過設置此代碼引入bootstrap 的樣式，可以調整ueditor編輯器的寬度，此時為6 行，bootstrap將一個文檔划分為共12行。如果不設置，ueditor將占據整個屏幕的寬度。
@Html.EditorFor(model => model.Content) //此輔助方法將會結合 模型中的數據注解[DataType(DataType.Multiline)]生成<textarea id="content",name="content" rows=1 cols=2>Model.Content</textarea>標簽。 id和name屬性均為content.去除了control-label css 屬性。
或者直接使用 @Html.TextAreaFor(m =>m.Content) 輔助方法，生成<textarea>標簽。
然后在底部加入以下腳本代碼：
@section Scripts {
@Scripts.Render("~/bundles/jqueryval","~/Content/ueditor/ueditor.config.js","~/Content/ueditor/ueditor.all.js") //通過路徑引入 對ueditor.config.js,ueditor.all.js的引用。
//可以使用@Script.Render("*.js","*.js")一條語句同時渲染同個javascript文件。生成多個<script type="text/javascript" src="*.js">文件。
<script type="text/javascript">
初始化一個editor對象，可以直接建立對象的初始化。
//方法1、初始化一個editor對象， new baidu.editor.ui.editor 新建ueditor對象，
var editor = new baidu.editor.ui.Editor({
UEDITOR_HOME_URL:'/Content/ueditor/',//配置編輯器路徑 也可以在ueditor.config.js文件中配置。
iframeCssUrl:'/Content/ueditor/themes/iframe.css',//樣式路徑
// initialContent:'歡迎使用ueditor',//初始化編輯器內容
autoHeightEnabled:true,//高度自動增長
initialFrameHeight:400 //配置編輯器的初始高度為400px。
});
editor.render('Content'); //將編輯器裝入 ID=Content 的文本域中。
</script>
}
初始化ueditor對象方法2，先設置初始化選項，再用選項來初始化ueditor對象。
@section Scripts {
@Scripts.Render("~/bundles/jqueryval", "~/Content/ueditor/ueditor.config.js", "~/Content/ueditor/ueditor.all.js")
<script type="text/javascript">
var editorOption = {
initialFrameWidth: 784,
initialFrameHeight: 400
};
var editor = new baidu.editor.ui.Editor(editorOption);
editor.render('Content');
$('form').submit(function () {
$('#Content').val(editor.getContent());
});
</script>
5、配置ueditor.config.js 。打開ueditor.config.js，
通過加入window.UEDITOR_HOME_URL = "/Content/ueditor/";配置ueditor的根路徑。如果在view中創建編輯器實例的時候時候已初始化，就不用設置根路徑了。但是如果沒有設置，就必須設置window.UEDITOR_HOME_URL 的根路徑值。如圖：
還可以設置另外的一些參數。
//,initialContent:'歡迎使用ueditor!' //初始化編輯器的內容,也可以通過textarea/script給值，看官網例子
//indentValue
//首行縮進距離,默認是2em
//,indentValue:'2em'
//,initialFrameWidth:1000 //初始化編輯器寬度,默認1000
//,initialFrameHeight:320 //初始化編輯器高度,默認320
//啟用自動保存
//,enableAutoSave: true
//自動保存間隔時間， 單位ms
//,saveInterval: 500
//autoHeightEnabled
// 是否自動長高,默認true
//,autoHeightEnabled:true
6、配置config.json。打開編輯器的net文件夾下的config.json文件。進行上傳圖片、塗鴉、視頻、附件等的路徑、大小、類型的的配置。
將圖片、塗鴉、視頻、附件等的圖片訪問前綴改為"/Content/ueditor/net/", /*。如圖片訪問前綴 "imageUrlPrefix": "/Content/ueditor/net/"，
如下圖：如果不配置前綴路徑，能正確上傳圖片等，但是不能在線編輯、不能訪問。圖片就顯示成一個紅叉。
同時，也可以配置
"imageMaxSize": 2048000, /* 上傳大小限制，單位B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上傳圖片格式顯示 */
"imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
/* {filename} 會替換成原文件名,配置這項需要注意中文亂碼問題 */
/* {rand:6} 會替換成隨機數,后面的數字是隨機數的位數 */
/* {time} 會替換成時間戳 */
/* {yyyy} 會替換成四位年份 */
/* {yy} 會替換成兩位年份 */
/* {mm} 會替換成兩位月份 */
/* {dd} 會替換成兩位日期 */
/* {hh} 會替換成兩位小時 */
/* {ii} 會替換成兩位分鍾 */
/* {ss} 會替換成兩位秒 */
/* 非法字符 \ : * ? " < > | */
/* 具請體看線上文檔: fex.baidu.com/ueditor/#use-format_upload_filename */
fileAllowFiles": [
".png", ".jpg", ".jpeg", ".gif", ".bmp",
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
], /* 上傳文件格式顯示 */
7、然后在Article 控制器 的Create和Edit httpPost方法中加入 [ValidateInput(false)]屬性。 然后數據庫將html標簽保存到數據庫中。
如果不加入此注解，表單將不能正確的提交，並出現 ”潛在的風險的Request.Form值。
“
8、在Article控制器中新建一個Action，用來返回一個article 實體，用來顯示內容。如下采用腳手架自動創建的Detials操作方法。
// GET: Admin/Article/Details/5
public ActionResult Details(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Article article = _articleService.Find(a => a.ArticleID == id);
if (article == null)
{
return HttpNotFound();
}
return View(article);
}
9、創建對應的 View，顯示Content字段的值，就必須使用@htm.Raw()輔助方法，也就是對數據提取出來的Content 字段的html標簽不進行編碼。如下采用腳手架自動生成的Detail視圖。
@model MajorConstruction.Models.Article
@{
ViewBag.Title = "Details";
}
<div class="container">
<div class="row ">
<h2 class="text-center">@Html.DisplayFor(model => model.Title)</h2>
<hr />
@Html.DisplayFor(model => model.PostTime) @Html.DisplayNameFor(model => model.AuthorName) @Html.DisplayFor(model => model.AuthorName) <br /><br />
@Html.Raw(Model.Content)
</div>
</div>
