asp.netmvc5使用百度ueditor本编辑器完整示例（上）

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

最近做一个项目，用到了百度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 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">文件。

初始化一个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>