1、 准备工作

首先下载HTMLBox,下载地址:
http://remiya.com/htmlbox/index.php/6/download/latest-version.html
解压后的文件如上:
Asp.net mvc 4下的html编辑器-HTMLBox_第1张图片
2、 创建ASP.NET MVC 2.0 Razor项目,选择“空”项。
A.        添加JQuery文件,如下图:

Asp.net mvc 4下的html编辑器-HTMLBox_第2张图片

B.        添加HtmlBox文件,如下图:

Asp.net mvc 4下的html编辑器-HTMLBox_第3张图片

因为路径问题,你可能看不到编辑上的小图片,所以修改htmlbox.full.js的图片的路径如下图选中行:

Asp.net mvc 4下的html编辑器-HTMLBox_第4张图片

 

注意:为了不在编辑器中显示HTMLBox的Logo,可以在HtmlBox文件夹下的p_w_picpaths中的logo.gif删除。
3、 在Modes中添加一个TestModel类,有两个属性:Title,Content
    public class TestModel
    {
        [Display(Name = "标题")]
        [Required]
        public string Title
        {
            get;
            set;
        }
        [Display(Name = "内容")]
        [Required]        
        public string Content
        {
            get;
            set;
        }
}
4、 创建一个名为Test的Controller,有两个Action
       public class TestController : Controller
    {
          public ActionResult Index()
        {
            TestModel tm = new TestModel();
            tm.Title = "标题";
            tm.Content = "这是一个测试";
            return View(tm);
        }
        [HttpPost]
        [ValidateInput(false)]//当页面提交具有html标签时不进行验证
        public ActionResult Index(TestModel tm)
        {
            string content = tm.Content;
            return View();
        }}
5、 在View中创建文件夹Test,并添加Index.cshtml,代码如下:
@model MVC4_HTMLBox.Models.TestModel
@{
    Layout = null;
}
   
    Index
   
   
   
   
   
   
 
    @using (Html.BeginForm())
    {      
        @Html.LabelFor(mod => mod.Title)
       
                                        
        @Html.EditorFor(mod => mod.Title)
       

        @Html.LabelFor(mod => mod.Content)
        //这里是标准的htmlhelper,不管从Controller获取数据或提交Controller数据都不用变化
        @Html.EditorFor(mod => mod.Content)
       
       
            }
      @* 下面代码用来支持编辑器显示*@
   
 
提示:
运行程序,编辑并提交,可以在Index这个Action中获取TestModel的数据,可以看到tm的Content是一个带有HTML标签的内容。

Asp.net mvc 4下的html编辑器-HTMLBox_第5张图片