Asp.net mvc 4下的html编辑器－HTMLBox
教程管理员 发布于2023-09-30 14:17 HTML教程 131
简介：
2、 创建ASP.NET MVC 2.0 Razor项目，选择“空”项。
A. 添加JQuery文件，如下图：
1、 准备工作
首先下载HTMLBox，下载地址： http://remiya.com/htmlbox/index.php/6/download/latest-version.html 解压后的文件如上：2、 创建ASP.NET MVC 2.0 Razor项目，选择“空”项。
A. 添加JQuery文件，如下图：
注意：为了不在编辑器中显示HTMLBox的Logo，可以在HtmlBox文件夹下的images中的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 = "这是一个<font size='48'>测试</font>"; 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; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <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> </head> <body> @using (Html.BeginForm()) { @Html.LabelFor(mod => mod.Title) <br /> @Html.EditorFor(mod => mod.Title) <br /> <br /> @Html.LabelFor(mod => mod.Content)<br /> //这里是标准的htmlhelper，不管从Controller获取数据或提交Controller数据都不用变化 @Html.EditorFor(mod => mod.Content) <br /> <br /> <input type="submit" value="提交" /> } @* 下面代码用来支持编辑器显示*@ <script> $("#Content").css("height", "600px").css("width", "800px").htmlbox({ toolbars: [ [ // Cut, Copy, Paste "separator", "cut", "copy", "paste", // Undo, Redo "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" ], [// Show code "separator", "code", // Formats, Font size, Font family, Font color, Font, Background "separator", "formats", "fontsize", "fontfamily", "separator", "fontcolor", "highlight", ], [ //Strip tags "separator", "removeformat", "striptags", "hr", "paragraph", // Styles, Source code syntax buttons "separator", "quote", "styles", "syntax" ] ], skin: "blue" }); </script> </body> </html> 提示： 运行程序，编辑并提交，可以在Index这个Action中获取TestModel的数据，可以看到tm的Content是一个带有HTML标签的内容。
本文转自桂素伟51CTO博客，原文链接： http://blog.51cto.com/axzxs/1006246，如需转载请自行联系原作者
相关推荐
- 02-03 net程序员英文应聘求职简历_简介doc文档Word模板下载
- 01-27 net软件工程师应聘求职简历模板_简介doc文档Word模板下载
- 10-04 在HTML中取得请求中的参数
- 10-04 SharePoint 2013 母版页取消和HTML页关联
- 10-04 29行代码使用HTML5 Canvas API绘制一颗红心
- 10-04 浏览器加载和渲染html的顺序，Div和Table的区别
- 10-04 《HTML5完美游戏开发》——2.6 Processing.js实例和整合
- 10-04 如何关闭Struts2的webconsole.html
- 10-04 《HTML5 开发实例大全》——1.4 使用CSS修饰HTML 5页面
- 10-04 《HTML5游戏编程核心技术与实战》——2.8 小结
- 控制面板
- 友情链接
- 最近发表
-
- 涂鸦而不乱简约艺术主题Office PPT免费模板背景素材下载
- 有创意的情人表白动态贺卡Office PPT免费模板背景素材下载
- 绿色简约技能竞赛电力Office PPT免费模板背景素材下载
- 极简几何商务蓝年终总结汇报Office PPT免费模板背景素材下载
- 蓝橙简约商务年终总结汇报Office PPT免费模板背景素材下载
- 绿色清新教育风课堂教学通用Office PPT免费模板背景素材下载
- 潮流复古艺术感年终总结Office PPT免费模板背景素材下载
- 浅绿商务风工作总结报告Office PPT免费模板背景素材下载
- 大气简约时尚年终总结汇报Office PPT免费模板背景素材下载
- 喜庆春节风公司年终誓师表彰大会Office PPT免费模板背景素材下载
- 最新留言
-
