.NET MVC和Summernote使用示例

最新推荐文章于 2024-02-03 20:00:00 发布

转载最新推荐文章于 2024-02-03 20:00:00 发布 · 779 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/WuLex

UEditor.js|Quill.js|Summernote 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个基于Bootstrap的WYSIWYG编辑器Summernote，并提供了使用示例，包括如何集成到ASP.NET MVC应用中，实现富文本编辑及图片上传功能。

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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</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 {
    <!-- include summernote css/js-->
    <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>&copy; @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
    }
}