1、 准备工作
2、 创建ASP.NET MVC 2.0 Razor项目,选择“空”项。
因为路径问题,你可能看不到编辑上的小图片,所以修改htmlbox.full.js的图片的路径如下图选中行:
注意:为了不在编辑器中显示HTMLBox的Logo,可以在HtmlBox文件夹下的images中的logo.gif删除。 3、 在Modes中添加一个TestModel类,有两个属性:Title,Content
4、 创建一个名为Test的Controller,有两个Action
public class TestController : Controller
public ActionResult Index()
TestModel tm = new TestModel();
tm.Content = "这是一个<font size='48'>测试</font>";
[ValidateInput(false)]//当页面提交具有html标签时不进行验证
public ActionResult Index(TestModel tm)
string content = tm.Content;
5、 在View中创建文件夹Test,并添加Index.cshtml,代码如下:
@model MVC4_HTMLBox.Models.TestModel
<meta name="viewport" content="width=device-width" />
<script src="~/Script/jquery-1.7.1.min.js"></script>
<script src="~/HtmlBox/htmlbox.colors.js"></script>
<script src="~/HtmlBox/htmlbox.styles.js"></script>
<script src="~/HtmlBox/htmlbox.syntax.js"></script>
<script src="~/HtmlBox/xhtml.js"></script>
<script src="~/HtmlBox/htmlbox.full.js"></script>
@using (Html.BeginForm())
@Html.LabelFor(mod => mod.Title)
@Html.EditorFor(mod => mod.Title)
@Html.LabelFor(mod => mod.Content)<br />
//这里是标准的htmlhelper,不管从Controller获取数据或提交Controller数据都不用变化
@Html.EditorFor(mod => mod.Content)
<input type="submit" value="提交" /> }
$("#Content").css("height", "600px").css("width", "800px").htmlbox({
"separator", "cut", "copy", "paste",
"separator", "undo", "redo",
// Bold, Italic, Underline, Strikethrough, Sup, Sub
"separator", "bold", "italic", "underline", "strike", "sup", "sub",
// Left, Right, Center, Justify
"separator", "justify", "left", "center", "right",
// Ordered List, Unordered List, Indent, Outdent
"separator", "ol", "ul", "indent", "outdent",
// Hyperlink, Remove Hyperlink, Image
"separator", "link", "unlink", "image"
// Formats, Font size, Font family, Font color, Font, Background
"separator", "formats", "fontsize", "fontfamily",
"separator", "fontcolor", "highlight",
"separator", "removeformat", "striptags", "hr", "paragraph",
// Styles, Source code syntax buttons
"separator", "quote", "styles", "syntax"
运行程序,编辑并提交,可以在Index这个Action中获取TestModel的数据,可以看到tm的Content是一个带有HTML标签的内容。