wangeditor基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费。听到这样的介绍,当然难免心动,于是决定在新的项目里面使用wangeditor。
新建项目
打开Visual Studio ,新建一个项目,取名为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
源代码清单:
@ViewBag.Title -富文本编辑器测试
下面首先为这个模板页面添加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 Scri