.NET MVC和Summernote使用示例

偏执的太偏执、 2021-07-04 11:20 477阅读 0赞

## Index.cshtml ##

@{
        ViewBag.Title = "Home Page";
    }
    
    <div class="jumbotron">
        <h1>SUMMERNOTE</h1>
        <p class="lead">Summernote是Bootstrap上的超级简单WYSIWYG编辑器。</p>
        <p><a target="_blank" href="http://summernote.org" class="btn btn-primary btn-lg">Learn more »</a></p>
    </div>
    
    <div class="row">
        <div class="col-md-4">
            <h2>Getting started</h2>
            <p>
                Summernote概述，如何下载和使用，基本功能和示例等。
            </p>
            <p>
                <a class="btn btn-default" href="http://summernote.org/getting-started/">Learn more »</a>
            </p>
        </div>
        <div class="col-md-4">
            <h2>Deep dive</h2>
            <p>自定义summernote的组件，工具栏，插件以获取自己的版本。</p>
            <p>
                <a class="btn btn-default" href="http://summernote.org/deep-dive/">Learn more »</a>
            </p>
        </div>
        <div class="col-md-4">
            <h2>Examples</h2>
            <p>See all useful features of summernote in action.</p>
            <p>
                <a class="btn btn-default" href="http://summernote.org/examples/">Learn more »</a>
            </p>
        </div>
    </div>
    
    <h2>Summernote示例</h2>
    
    @using (Html.BeginForm())
    {
        <div class="row">
            <div class="col-md-12">
                @Html.TextArea("Summernote")
            </div>
            <div class="col-md-12">
                <button class="btn btn-primary" type="submit">Save</button>
            </div>
        </div>
    }
    
    <h2>Result after submit</h2>
    <div class="row">
        <div class="col-md-12">
            @if (ViewBag.Summernote != null)
            {
                @Html.Raw(ViewBag.Summernote)
            }
        </div>
        <div class="col-md-12">
            <textarea class="form-control">
                @if (ViewBag.Summernote != null)
                {
                    @ViewBag.Summernote
                }
            </textarea>
        </div>
    </div>
    
    @section scripts {
        
        <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet">
        <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>
    
        <script> $(document).ready(function () { $('#Summernote').summernote({ callbacks: { onImageUpload: function (files) { sendFile(files[0]); } } }); //上传文件到服务器 function sendFile(file) { var data = new FormData(); data.append("file", file); $.ajax({ data: data, type: "POST", // 调用操作：控制器：HomeController中的SummernoteUploadImage url: '@Url.Action("SummernoteUploadImage", "Home")', cache: false, contentType: false, processData: false, success: function (response) { // 上传到服务器后，将图像插入编辑器中的正确位置。 $('#Summernote').summernote('insertImage', response.Url, function ($image) { $image.css('width', $image.width()); }); } }); } }); </script>
    }

如果您使用的是Summernote的Boostrap 3或4版本，Summernote使用的是开放源代码库jQuery和Bootstrap，如果使用的是Lite版本，则为jQuery。

## \_Layout.cshtml ##

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>@ViewBag.Title - My ASP.NET Application</title>
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    
    </head>
    <body>
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                
            </div>
        </div>
        <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <p>© @DateTime.Now.Year</a></p>
            </footer>
        </div>
    
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
    </body>
    </html>

## HomeController.cs ##

using System;
    using System.Collections.Generic;
    using System.Diagnostics;
    using System.IO;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    
    namespace SummernoteExample.Controllers
    { 
        public class HomeController : Controller
        { 
            public ActionResult Index()
            { 
                return View();
            }
    
            [HttpPost]
            [ValidateInput(false)]
            public ActionResult Index(string summernote)
            { 
                ViewBag.Summernote = summernote;
                return View();
            }
    
    
            public ActionResult About()
            { 
                ViewBag.Message = "";
    
                return View();
            }
    
            public ActionResult Contact()
            { 
                ViewBag.Message = "";
    
                return View();
            }
    
            #region SUMMERNOTE上传图片
    
            [HttpPost]
            public ActionResult SummernoteUploadImage()
            { 
                foreach (var fileKey in Request.Files.AllKeys)
                { 
                    var file = Request.Files[fileKey];
                    try
                    { 
                        var fileName = Path.GetFileName(file?.FileName);
                        if (fileName != null)
                        { 
                            var path = Server.MapPath("~/Uploads/SummernoteImages");
                            if (System.IO.File.Exists(path) == false)
                            { 
                                Directory.CreateDirectory(path);
                            }
    
                            path = Path.Combine(Server.MapPath("~/Uploads/SummernoteImages"), fileName);
                            file.SaveAs(path);
                            return Json(new {  Url = Url.Content("~/Uploads/SummernoteImages/" + fileName) });
                        }
                    }
                    catch (Exception ex)
                    { 
                        return Json(new {  Message = $"Error in saving file ({ex.Message})" });
                    }
                }
                return Json(new {  Message = "File saved" });
            }
    
            #endregion
        }
    }

## 结果如图 ##

![在这里插入图片描述][20201001122555874.png]

![在这里插入图片描述][20201001122612438.png]

[20201001122555874.png]: /images/20210704/4768d86c838b423db90d081b56f0aba4.png
[20201001122612438.png]: /images/20210704/83ece9504c2e42caae7ef86817a8cdfe.png