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

最新推荐文章于 2021-06-17 01:16:30 发布

原创最新推荐文章于 2021-06-17 01:16:30 发布 · 56 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#测试 #php #javascript #ViewUI

本文详细介绍了如何利用HTMLBox和ASP.NET MVC2.0Razor框架创建一个支持HTML标签的交互式编辑器。包括下载HTMLBox、创建项目、添加依赖库、实现数据绑定以及配置HTML编辑器等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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>

<title>Index</title>

</head>

<body>

@using (Html.BeginForm())

{

@Html.LabelFor(mod => mod.Title)

<br />

@Html.EditorFor(mod => mod.Title)

@Html.LabelFor(mod => mod.Content)<br />

//这里是标准的htmlhelper，不管从Controller获取数据或提交Controller数据都不用变化

@Html.EditorFor(mod => mod.Content)

<br />

<input type="submit" value="提交" /> }

@* 下面代码用来支持编辑器显示*@

$("#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标签的内容。