asp.net mvc5 使用百度ueditor 本编辑器

最近做一个项目，用到了百度ueditor富文本编辑器，功能强大，在线编辑文档，上传图片视频、附件。

1、访问http://ueditor.baidu.com/website/download.html 进入开发版的下载页面，下载.net UTF-8版本，现在最新的是1.43版。

2、下载后解压，将文件夹更名为ueditor，则ueditor文件夹里面就是原程序。

3、将此ueditor文件夹复制到自己MVC项目的Content文件中.

4、在项目中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) { }
}

 5、编译一次项目，然后在Controller文件中新建控制器，模型选Article,利用脚手架功能自动创建控制器ArticleController和新建、编辑、删除各种视图。

6、以下Create视图和Edit视图的操作方式完全一样的。打开Create视图，将内容字段改成

<div class="form-group">
@Html.LabelFor(model => model.Content, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-6">   //通过设置此代码引入bootstrap 的样式，可以调整编辑器的宽度，此时为6 行，bootstrap将一个文档划分为共12行。
@Html.EditorFor(model => model.Content)   //此辅助方法将会结合 模型中的数据注解[DataType(DataType.Multiline)]生成<textarea id="content",name="content" rows=1 cols=2>Model.Content</textarea>标签。 id和name属性均为content.

然后在底部加入

@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对象， 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>
}