您的位置：首页 > 编程语言 > ASP

Asp.net mvc 4下的html编辑器－HTMLBox

2012-09-25 15:52 381 查看

1、准备工作

首先下载HTMLBox，下载地址：
http://remiya.com/htmlbox/index.php/6/download/latest-version.html
解压后的文件如上：

2、创建ASP.NET MVC 2.0 Razor项目，选择“空”项。
A. 添加JQuery文件，如下图：

B. 添加HtmlBox文件，如下图：

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

注意：为了不在编辑器中显示HTMLBox的Logo，可以在HtmlBox文件夹下的images中的logo.gif删除。
3、在Modes中添加一个TestModel类，有两个属性：Title，Content
[align=left] public class TestModel[/align]
[align=left] {[/align]
[align=left] [Display(Name = "标题")][/align]
[align=left] [Required][/align]
[align=left] public string Title[/align]
[align=left] {[/align]
[align=left] get;[/align]
[align=left] set;[/align]
[align=left] }[/align]
[align=left] [Display(Name = "内容")][/align]
[align=left] [Required] [/align]
[align=left] public string Content[/align]
[align=left] {[/align]
[align=left] get;[/align]
[align=left] set;[/align]
[align=left] }[/align]
}
4、创建一个名为Test的Controller，有两个Action
[align=left] public class TestController : Controller[/align]
[align=left] {[/align]
[align=left] public ActionResult Index()[/align]
[align=left] {[/align]
[align=left] TestModel tm = new TestModel();[/align]
[align=left] tm.Title = "标题";[/align]
[align=left] tm.Content = "这是一个<font size='48'>测试</font>";[/align]
[align=left] return View(tm);[/align]
[align=left] }[/align]
[align=left] [HttpPost][/align]
[align=left] [ValidateInput(false)]//当页面提交具有html标签时不进行验证[/align]
[align=left] public ActionResult Index(TestModel tm)[/align]
[align=left] {[/align]
[align=left] string content = tm.Content;[/align]
[align=left] return View();[/align]
[align=left] }}[/align]
5、在View中创建文件夹Test，并添加Index.cshtml，代码如下：
[align=left]@model MVC4_HTMLBox.Models.TestModel[/align]
[align=left]@{[/align]
[align=left] Layout = null;[/align]
[align=left]}[/align]
[align=left]<!DOCTYPE html>[/align]
[align=left]<html>[/align]
[align=left]<head>[/align]
[align=left] <meta name="viewport" content="width=device-width" />[/align]
[align=left] <title>Index</title>[/align]
[align=left] <script src=\'#\'" /Script/jquery-1.7.1.min.js"></script>[/align]
[align=left] <script src=\'#\'" /HtmlBox/htmlbox.colors.js"></script>[/align]
[align=left] <script src=\'#\'" /HtmlBox/htmlbox.styles.js"></script>[/align]
[align=left] <script src=\'#\'" /HtmlBox/htmlbox.syntax.js"></script>[/align]
[align=left] <script src=\'#\'" /HtmlBox/xhtml.js"></script>[/align]
[align=left] <script src=\'#\'" /HtmlBox/htmlbox.full.js"></script>[/align]
[align=left] [/align]
[align=left]</head>[/align]
[align=left]<body>[/align]
[align=left] @using (Html.BeginForm())[/align]
[align=left] { [/align]
[align=left] @Html.LabelFor(mod => mod.Title)[/align]
[align=left] <br /> [/align]
[align=left] @Html.EditorFor(mod => mod.Title)[/align]
[align=left] <br /> <br />[/align]
[align=left] @Html.LabelFor(mod => mod.Content)<br />[/align]
[align=left] //这里是标准的htmlhelper，不管从Controller获取数据或提交Controller数据都不用变化[/align]
[align=left] @Html.EditorFor(mod => mod.Content)[/align]
[align=left] <br />[/align]
[align=left] <br />[/align]
[align=left] <input type="submit" value="提交" /> }[/align]
[align=left] @* 下面代码用来支持编辑器显示*@[/align]
[align=left] <script>[/align]
[align=left] $("#Content").css("height", "600px").css("width", "800px").htmlbox({[/align]
[align=left] toolbars: [[/align]
[align=left] [[/align]
[align=left] // Cut, Copy, Paste[/align]
[align=left] "separator", "cut", "copy", "paste",[/align]
[align=left] // Undo, Redo[/align]
[align=left] "separator", "undo", "redo",[/align]
[align=left] // Bold, Italic, Underline, Strikethrough, Sup, Sub[/align]
[align=left] "separator", "bold", "italic", "underline", "strike", "sup", "sub",[/align]
[align=left] // Left, Right, Center, Justify[/align]
[align=left] "separator", "justify", "left", "center", "right",[/align]
[align=left] // Ordered List, Unordered List, Indent, Outdent[/align]
[align=left] "separator", "ol", "ul", "indent", "outdent",[/align]
[align=left] // Hyperlink, Remove Hyperlink, Image[/align]
[align=left] "separator", "link", "unlink", "image"[/align]
[align=left] [/align]
[align=left] ],[/align]
[align=left] [// Show code[/align]
[align=left] "separator", "code",[/align]
[align=left] // Formats, Font size, Font family, Font color, Font, Background[/align]
[align=left] "separator", "formats", "fontsize", "fontfamily",[/align]
[align=left] "separator", "fontcolor", "highlight",[/align]
[align=left] ],[/align]
[align=left] [[/align]
[align=left] //Strip tags[/align]
[align=left] "separator", "removeformat", "striptags", "hr", "paragraph",[/align]
[align=left] // Styles, Source code syntax buttons[/align]
[align=left] "separator", "quote", "styles", "syntax"[/align]
[align=left] ][/align]
[align=left] ],[/align]
[align=left] skin: "blue"[/align]
[align=left] });[/align]
[align=left] </script>[/align]
[align=left]</body>[/align]
[align=left]</html>[/align]
[align=left] [/align]
[align=left]提示：[/align]
[align=left]运行程序，编辑并提交，可以在Index这个Action中获取TestModel的数据，可以看到tm的Content是一个带有HTML标签的内容。[/align]

本文出自 “桂素伟” 博客，请务必保留此出处http://axzxs.blog.51cto.com/730810/1006246

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航