asp .net mvc实现富文本框

最新推荐文章于 2024-04-26 16:47:03 发布

猫猫.net

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量519

点赞数 1

本文链接：https://blog.csdn.net/qq_58734875/article/details/125340769

版权

.net mvc 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先我使用的是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");//重定向
        }