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

最新推荐文章于 2021-06-17 01:16:30 发布
最新推荐文章于 2021-06-17 01:16:30 发布
阅读量98 收藏
点赞数
文章标签： 测试 php javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_34198762/article/details/85034598
版权

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标签的内容。

weixin_34198762
关注
Asp.Net Core 6.0 Mvc入门 图书查询系统 附带源码下载
代数的博客
12-05 6685
Asp.Net Core 6.0 Mvc入门 快乐编程！
c# asp.net mvc使用斑马GK888t打印机打印标签
abc_4567890的博客
11-01 2292
前言 c#语言，asp.net mvc，南京都昌电子病历模板工具（类似word），斑马GK888t,打印手腕带和标签纸。 实现步骤为：在页面上显示一个或多个都昌模板工具，点击页面上的button，出现都昌控件的预览界面，然后在预览界面上点击打印，打印到手腕带纸或者标签纸上。 简述 安装打印机驱动(不是很理解，如有错误，欢迎大家赐教) 从网上下载了GK888t的打印机驱动，并完成安装。（...
【ASP.NET 插件】分享一个可视化HTML编辑器 CKEditor.NET
04-21 162
因为公司网站的可视化HTML编辑器IE兼容性问题，js报错不能使用，于是在网上找到了个还行的，图片本地上传的话直接把图片拖到编辑窗口就可以了。这个编辑器是在开源中国看到的，个人觉得还不错！ CKEditor.NET 是CKEditor和 ASP.NET 的集成版本。 软件文档 软件下载 来源 转载于:https://www.cnblogs.com/y...
mvc html编辑器,用Ueditor为Asp.net mvc打造可视化HTML编辑器
weixin_29356805的博客
06-17 255
在Asp.net WebForm时代，Web系统的HTML可视化编辑器可以使用FTB一类的控件，直接引入工具箱拖拉即可实现。但是在Asp.net MVC时代，直接使用服务器端控件是不符合MVC的标准和约束，会出现这样或者那样的问题。UEditor似乎又是不错的一款可视化编辑器，有百度做后台支撑，开源，而且样式漂亮，自定义容易……所以我决定在我的系统中使用Ueditor作为可视化编辑工具，但是因为U...
初学者的CKEditor ASP.NET控制集成指南
weixin_33849215的博客
02-25 103
转载于官网：http://docs.cksource.com/CKEditor_3.x/Developers_Guide/ASP.NET/Integration_Beginners 这里于大家分享下！ 首先去官网下载最新的安装包：http://ckeditor.com/download 找到要下载的asp.net的DownLoad下，然后照着官网新建的例子一步步操作。 以下内容为官网上的步...
Html编辑器控件(ASP.NET)收集
03-23 2539
 1,FCK editor FCK editor是一个HTML/DHTML编辑器，用于 ASP, asp.net, PHP, 和 JavaScript ，它给Web带来了很多著名的桌面编辑器（如Word）的强大功能性。它非常轻便，不需要客户机上的任何类型的安装。 下载地址:sourceforge.net 界面: 本站提供的Rainbow使用了这个编辑器 2,FreeTextbox 下载地址:so
KindEditor在线HTML文本编辑器在asp.net中的使用
LisenYang的专栏
04-25 2710
KindEditor在线HTML文本编辑器在asp.net中的使用
基于ASP.NET的博客系统源代码
04-02
4. MVC架构：ASP.NET MVC是一种流行的设计模式，它分离了模型（Model）、视图（View）和控制器（Controller）。在这个博客系统中，模型可能负责处理数据，控制器处理请求并更新模型，而视图则负责渲染用户界面。 ...
power bi报表服务器_如何将Power BI Report Server报表嵌入ASP.Net Web应用程序
culuo4781的博客
07-19 2541
power bi报表服务器 Every once in a while, teams from different functional areas of the business (i.e. business intelligence, software development, web development etc.) would join forces to form a cross...
SignalR 2.0 and MVC 5即时通讯完整版示例
12-04
本教程将向您介绍使用ASP.NET SignalR 2和ASP.NET MVC 5进行实时Web应用程序开发。本教程使用与SignalR入门教程相同的聊天应用程序代码，但演示如何将其添加到MVC 5应用程序。 在这个主题中，您将学习以下SignalR...
asp.net MVC 在线编辑器
01-26
很好用的一个asp.net mvc 在线编辑器，调用简单，功能强大。
Asp.net MVC 下使用百度 UEditor 编辑器
12-23
Asp.net MVC 下使用百度 UEditor 编辑器
asp.net mvc 在线编辑器
03-23
主要功能： 字体，字号，段落格式，加粗，斜体，下划线，上标，下标，删除线，左对齐，居中，右对齐，全选，剪切，复制，粘贴，撤消，恢复，编号，项目符号，减少缩进量，增加缩进量，替换，插入超级链接，去掉超级链接，插入表格，插入行，删除行，插入列，删除列，插入水平线，字体颜色，字体背景颜色，特效字体，插入特殊符号，取消格式，清理代码，插入图片，插入Flash，插入Windows Media，插入Real Media，插入大表情，插入QQ表情，插入代码，插入引用，隐藏内容，上传并插入图片 特色功能： 首先漂亮，提供调用编辑器时候可以自定义颜色！ 然后操作简单，简单的一塌糊涂，呵呵，功能虽然多，可是绝对的精简，用最少的代码实现了最适用的功能！ 还有该编辑不是JS调用格式，纯ASP调用编辑菜单，安全性绝佳！ 另外，这个编辑器代码绝对精简，比起一般大型的编辑器，非常容易修改，改造成适用于自己的编辑器！
一步步教你在Asp.net Mvc中使用UEditor编辑器
10-20
大家都知道ueditor是百度编辑器，目前使用也比较广泛，下面这篇文章主要是通过一步步的步骤教大家在Asp.net Mvc中使用UEditor编辑器,需要的朋友可以参考借鉴，下面来一起看看吧。
几款Asp.net下的Html编辑器
weixin_30315435的博客
11-17 247
推荐几款常用的富文本编辑器： FreeTextBox FCKEditor TinyMCE 当然还有很多类似的编辑器，你也可以在asp.net的官方网站上找到更多：http://asp.net/community/control-gallery/search.aspx?search=1&text=rich+textbox 另外你还可以在Con...
怎么在ASP.NET中写HTML,如何在Asp.net中使用HtmlArea编辑器
weixin_42515989的博客
05-31 146
HtmlArea是一款很简洁的WTYSWTYG编辑器，以前我用的是FreeTextBox,缺点很多，运行速度慢，架构太复杂，不支持ajax等等，HtmlArea是纯JS+Html的编辑器，理论上可以套在任何语言平台上，经过实际使用可以和Asp.Net 2.0 + Ajax 很好的结合，现在本博客系统已经拿它当作文章编辑器了，下面就是具体安装步骤。首先下载HtmlArea3.0,解压到Web项目的某...
对ASP.NET程序员非常有用的85个工具
老罗传奇
11-07 900
介绍 　　这篇文章列出了针对 ASP.NET 开发人员的有用工具。 　　工具 　　1. Visual Studio Visual Studio Productivity Power tool：Visual Studio 专业版(及以上)的扩展，具有丰富的功能，如快速查找，导航解决方案，可搜索的附加参考对话框等 ReSharper：提高 .NET 开发人员生产力的工具，提高代...
asp.net mvc5 使用百度ueditor 本编辑器完整示例（上）
北极星的专栏
08-31 6102
asp.net mvc5 使用百度ueditor 本编辑器完整示例（上） 最近做一个项目，用到了百度ueditor富文本编辑器，功能强大，在线编辑文档，上传图片\视频、附件。 MVC 模型的控制器准备： 1、建立模型。 在项目中Model 文件夹中建立 文章 模型，注意如果要渲染的内容 的模型字段需要加上[Datype(Datatype.MultilineText)]数据注解，以便在
MVC的项目使用html编辑器UEditorMINI
weixin_30325971的博客
12-18 84
一个MVC的项目中有个发布新闻的页面需要用到一个html的编辑器，网上看到UEditor评价貌似还不错， 因为我用到的功能比较简单，就下载了MINI版本的， 使用的过程在这里总结一下。 关于UEditorMINI又名UM 请看官方介绍 首先下载UEditorMINI 下载地址 把下载下来的文件解压，然后把文件夹名改为“umeditor”，把umeditor文件夹复制到网站的“Scrip...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值