博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Asp.net mvc 4下的html编辑器-HTMLBox
阅读量:6960 次
发布时间:2019-06-27

本文共 2684 字,大约阅读时间需要 8 分钟。

1、 准备工作

首先下载HTMLBox,下载地址:
解压后的文件如上:
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
    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标签的内容。

转载地址:http://mngil.baihongyu.com/

你可能感兴趣的文章
kloxo增加了域名,怎么不能访问?如何重启web服务?
查看>>
国学题库整理
查看>>
jquery chosen 插件 动态设置+更新选项值
查看>>
求最大值及其下标
查看>>
战力会议1
查看>>
水印情缘。。。
查看>>
为什么重写equals一定要重写hashCode?
查看>>
HDU Problem 4006 The kth great number 【队列】
查看>>
win8阉割版中文输入法
查看>>
Codeforces VK Cup 2015 A.And Yet Another Bracket Sequence(后缀数组+平衡树+字符串)
查看>>
以Drools5.5为例说明“规则引擎在业务系统中应用”---起始篇
查看>>
linux清理内存
查看>>
查看硬盘负载情况:iostat命令
查看>>
《人月神话》阅读笔记03
查看>>
Linux下防火墙开启相关端口及查看已开启端口
查看>>
php socket 编程(一)
查看>>
SDUT 简单枚举类型——植物与颜色
查看>>
Windows 下配置Git
查看>>
PD的CDM模型中的三种实体关系
查看>>
All you should know about NUMA in VMware!
查看>>