ASP.NET MVC5 使用wangeditor，以及图像上传

wangeditor基于javascript和css开发的 Web富文本编辑器，轻量、简洁、易用、开源免费。听到这样的介绍，当然难免心动，于是决定在新的项目里面使用wangeditor。

新建项目

打开Visual Studio 2015，新建一个项目，取名为Editor。选择模板为Empty，"为以下添加文件夹和核心引用"把MVC的勾给点上，这就添加了一个最简单的轻量的MVC项目。

新建MVC项目模板

安装Nuget插件

因为要使用到wangeditor，所以就需要JQuery，说不定也会用上Bootstrap。所以我们在Nuget上直接搜索Bootstrap就可以了。右击解决方案的项目，如下图所示搜索Bootstrap：

Nuget上直接搜索Bootstrap

安装Bootstrap的同时，也会自动安装JQuery。

安装Optimization，MSDN是这样介绍Optimization的：通过减少对服务器的请求数目并降低所请求的资产（例如，CSS 和 JavaScript 文件）的大小，使用 System.Web.Optimization 程序集中的命名空间和类来提高 Web 应用程序性能。

右击Controllers文件夹，添加一个新的控制器，取名为HomeController。

创建模板

下面，我们来创建一个模板的母页面。右击解决方案的View文件夹，新建文件夹Shared，再新建一个视图，取名为_Layout

源代码清单：

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title -富文本编辑器测试</title>
</head>
<body>
    <div> 
    </div>
</body>
</html>

下面首先为这个模板页面添加css和js文件。

右击App_Start文件夹新建一个名为BundleConfig的类，我们将一些常用的CSS组合和JS文件进行简单的打包，代码如下：

using System.Web;
using System.Web.Optimization;

namespace Editor
{
    public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                     "~/Scripts/bootstrap.js",
                     "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));
        }
        }
}

修改Global.asax.cs文件

using System.Web.Optimization;

protected void Application_Start() {
     ...
     BundleConfig.RegisterBundles(BundleTable.Bundles);
     ...
}

在View文件夹中的WEB.CONFIG增加文件：

 <namespaces>
        ......
        <add namespace="System.Web.Optimization"/>
      </namespaces>

然后我们再回到_Layout视图，为它增添CSS和JS文件。

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title -富文本编辑器测试</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
</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>
                @Html.ActionLink("Editor", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("主页", "Index", "Home")</li>
                   
                </ul>
               
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - 我的 ASP.NET 应用程序</p>
        </footer>
    </div>
</body>
</html>

右击HomeController文件中的Index()部分，新建一个Index视图，我们将在这个视图里面显示wangeditor的界面。

安装wangeditor

前往wangeditor github 主页进行下载wangeditor。

在下载的文件夹中找到dist文件夹，文件夹内容如下：

注意：其中的fonts文件夹必须存在，而且要和css放在一个目录下

在我们的项目里面CSS文件是放在Content 文件夹里面的，所以要把wangEditor.min.css拖到Content 文件夹里面，然后再把 fonts 文件夹也复制到 Content 里面。

把wangEditor.min.js放到项目的Scripts 文件夹里面去，完成这次手动安装。

再次打开BundleConfig.cs，我们要将刚才安装进来的css、js引用到项目里面来，增加以下代码：

bundles.Add(new StyleBundle("~/Content/wangEditor").Include(
                     "~/Content/wangEditor.min.css"));

 bundles.Add(new ScriptBundle("~/bundles/wangEditor").Include(
                       "~/Scripts/wangEditor.min.js",
                       "~/Scripts/WMedit.js"));

新建WMedit.js，这是一个wangEditor的创建js，相当的简单。

var editor = new wangEditor('textarea1');
editor.create();

打开_Layout视图，我们要将这些CSS,JS引用到视图里面去。

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title -富文本编辑器测试</title>
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/wangEditor")
   
    @Scripts.Render("~/bundles/jquery")
</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>
                @Html.ActionLink("Editor", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("主页", "Index", "Home")</li>
                   
                </ul>
               
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - 我的 ASP.NET 应用程序</p>
        </footer>
    </div>
     @Scripts.Render("~/bundles/wangEditor")
              
</body>
</html>

把Index视图做最后的修改：

@{
    ViewBag.Title = "Index";
}

<h2>Editor 测试</h2>

<textarea id="textarea1" rows="20">
    <p>请输入内容...</p>
</textarea>

运行测试，完成了！

wangeditor上传图片

根据官方给的C#上传图片例程，我们来修改一下项目，首先在项目里面新建一个文件夹，取名为ClassFile，再新建一个一般应用程序，取名为up.ashx，作为测试项目，我只要确保文件能够正确的上传就好了，并不要求安全性。

up.ashx.cs原文件：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Editor.ClassFile
{
    /// <summary>
    /// up 的摘要说明
    /// </summary>
    public class up : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            var files = context.Request.Files;
            if (files.Count <= 0)
            {
                return;
            }

            HttpPostedFile file = files[0];

            if (file == null)
            {
                context.Response.Write("error|file is null");
                return;
            }
            else
            {
                string path = context.Server.MapPath("~/uploadedFiles/");  //存储图片的文件夹
                string originalFileName = file.FileName;
                string fileExtension = originalFileName.Substring(originalFileName.LastIndexOf('.'), originalFileName.Length - originalFileName.LastIndexOf('.'));
                string currentFileName = (new Random()).Next() + fileExtension;  //文件名中不要带中文，否则会出错
                                                                                 //生成文件路径
                string imagePath = path + currentFileName;
                //保存文件
                file.SaveAs(imagePath);

                //获取图片url地址
                string imgUrl = "/uploadedFiles/" + currentFileName;

                //返回图片url地址
                context.Response.Write(imgUrl);
                return;
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

新建项目文件夹：uploadedFiles，顾名思义这是上传文件的文件夹。

最后，修改一下WMedit.js

var editor = new wangEditor('textarea1');
editor.config.uploadImgUrl = '/ClassFile/up.ashx';

editor.config.uploadHeaders = {
    'Accept': 'text/x-json'
};

editor.config.hideLinkImg = true;
editor.create();

运行成功，对于一个富文本编辑器来说，防御XSS攻击是非常有必要的，我推荐使用AntiXSS。

ASP.NET MVC5 使用wangeditor，以及图像上传