asp .net mvc实现富文本框

首先我使用的是summernote 具体库参考 Summernote 中文网 | Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器,基于 jQuery 和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项。该网站

先放代码

<!DOCTYPE html>
<htmllang="en">
<head><metacharset="UTF-8"><title>Summernote</title><linkhref="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css"rel="stylesheet"><script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> <linkhref="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css"rel="stylesheet"><script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>
</head>
<body>
<form method="post" id="NotForm" action="/TNotices/addByNottice">
<p>标题:<input type="text" style="width:95%; height:30px; border :solid 1px #ccc; border-radius:3px; margin-top:5px;" name="Title" id="Title" /></p><textarea name="Content" class="summernote" id="contents" title="Contents"></textarea>
@*富文本框*@
<input type="text" style="display:none;" name="ContentText" value="" id="ContentText" />
@*把富文本框的值给他 但是隐藏了*@
<p><input type="submit" style="background-color: #97c8ff; color:white; border:0px; border-radius:3px; float:right;" value="发布" onclick="addbtn()" /></p>
</form><script>
///初始化富文本框属性样式
$('.summernote').summernote({
height: '380px',
lang: 'zh-CN',
toolbar: [
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
['fontname', ['fontname']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ol', 'ul', 'paragraph', 'height']],
['table', ['table']],
['insert', ['link']],
['view', ['undo', 'redo', 'fullscreen', 'codeview', 'help']]
]});</script>
</body>
</html>

代码如上前端图片

打开的样子就是这样我没有上传图片和视频于是把他初始化了

其次：如果要将文本框内容上传到数据库的话，需要借助一个文本框了，上面的代码已经加入了

如何我们需要做的操作是获取富文本框的赋值给借助的文本框（id=ContentText）

然后再获取这个文本框的值上传到数据库

这样就已经取到值了接下来是控制器代码在控制器里面创建一个addByNottice 方法代码如下:

[HttpPost][ValidateInput(false)]public ActionResult addByNottice(string Title,string ContentText){var date = DateTime.Now.ToString("yyyy-MM-dd");Notice notice = new Notice(){Title = Title,Content = ContentText,Time=DateTime.Parse( date),TeacherID = int.Parse(Session["TeacherID"].ToString())};db.Notice.Add(notice);db.SaveChanges();return RedirectToAction("Index");//重定向}

另外附上数据库存的样子

是带有标签的所以视图使用时必须转换 @htmlRaw 如 <h4 class="nei">@Html.Raw(notice.Content)</h4> 原本显示内容是@notice.Content

asp .net mvc实现富文本框相关推荐

富文本框让最大四百像素_富文本框的使用
富文本框的种类有很多,例如 CKEditor UEEditor TinyEditor KindEditor 文件夹说明 ├── asp asp示例 ├── asp.net asp.net示例 ├── ...
php文本框长度限制,php截取富文本框中的固定长度的字符
ai,哎怎么赶脚自己写东西越来越小儿科了呢,现在连这个问题都找了好半天因为后台是的内容是富文本编辑器编辑的,前台我傻逼的直接截取了字符串,然后样式啥的都乱了,找了半天是因为富文本的问题其实解决办法 ...
解决Vue用v-html、v-text渲染后台富文本框文本内容样式修改问题，用自定义css样式无法渲染出对应效果的问题
举例: 如果您要加载富文本框内容的DOM id是detail 那么就这么写scss样式 #detail {font-size: 14px;text-align: center;&>> ...
常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor、TinyMCE、KindEditor ；和CKEditor实例...
目前市面上用的比较多的富文本编辑器有: FreeTextBox 一个有很多年历史的富文本编辑器了,使用简单,而且一般的使用是免费的,但是不开源,上传图片上传附件等功能没有,扩展性差. CuteEdit ...
ueditor 不显示工具栏_Python 之Django富文本框Ueditor的使用
Django框架是用Python进行Web开发的重要框架,进行Web开发通常会用到网页编辑器,百度的Ueditor网页编辑器功能非常强大,不直接支持python,但有Django第三方插件支持这就是D ...
split、replace、indexof、substr 用法（获取后台富文本框内容，截取图片）
1.split() 分割字符串,转化成数组 (1)分割数据中有某段字符串的数据 ,转化成数组 //拿取富文本框中的图片var div=data[0].text.split("/agricu ...
django（7）modelform操作及验证、ajax操作普通表单数据提交、文件上传、富文本框基本使用...
一.modelForm操作及验证 1.获取数据库数据,界面展示数据并且获取前端提交的数据,并动态显示select框中的数据 views.py from django.shortcuts importr ...
使用vue制作富文本框
这里分享一个富文本框插件,如图使用方法: 1-安装 npm install --save vue2-editor或者yarn add vue2-editor 2- 使用 // Basic Use - ...
html加载富文本_Uniapp基础实战富文本框解析 WordPress rest api实例
文本是更具上篇文章uni-app上下拉刷新的续文有需要了解上文的请点击下面连接访问传送门: Uni-app实战上加载新下拉刷新 WordPress rest api实例那么我们就开始了,主要的要是 ...

asp .net mvc实现富文本框

asp .net mvc实现富文本框相关推荐

最新文章

热门文章

asp .net mvc实现 富文本框

asp .net mvc实现 富文本框相关推荐

最新文章

热门文章

asp .net mvc实现富文本框

asp .net mvc实现富文本框相关推荐