wangeditor基于javascript和css开发的 Web富文本编辑器， 轻量、简洁、易用、开源免费。听到这样的介绍，当然难免心动，于是决定在新的项目里面使用wangeditor。
新建项目
打开Visual Studio 2015，新建一个项目，取名为Editor。选择模板为Empty，"为以下添加文件夹和核心引用"把MVC的勾给点上，这就添加了一个最简单的轻量的MVC项目。
安装Nuget插件
因为要使用到wangeditor，所以就需要JQuery，说不定也会用上Bootstrap。所以我们在Nuget上直接搜索Bootstrap就可以了。右击解决方案的项目，如下图所示搜索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>© @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>© @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。
综合来说，是个简洁的富文本编辑器。该有的功能基本都有了，更多文档请点击这里查看谢谢大家。转帖的时候请把凉风有兴或者AlexZeng.net进行署名。本文版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）
