ASP.NET MVC 中使用 UEditor 富文本编辑器

在上篇《使用ASP.NET MVC+Entity Framework快速搭建博客系统》中，已经基本上可以实现博客分类和博客文章的CURD。但是，文章编辑界面实在是……

好吧，咱得搞专业点。来个传说中的富文本编辑器，度娘了一下，发现 KISSY Editor 和 UEditor 貌似比较简单的样子，既然这样就用百度的 UEditor 吧，到这里下载最新的.NET版。

解压后，将默认目录名称改为 ueditor 然后复制到项目的 Content 目录中，大概就像下图中的样子

 

 

 

打开~/Views/Post/Create.cshtml 将代码替换为下面的代码

 

@model ShowPin.Web.Models.Post

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Post</h4>
        <hr />
        @Html.ValidationSummary(true)
        <div class="form-group">
            @Html.LabelFor(model => model.CategoryId, "CategoryId", new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("CategoryId", ViewBag.CategoryId as IQueryable<SelectListItem>, String.Empty, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.CategoryId)
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Id, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.Id, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Id)
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.Title, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.Title, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Title)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Content, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextAreaFor(m => m.Content)
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CreateDate, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.CreateDate, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.CreateDate)
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.hits, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextBoxFor(model => model.hits, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.hits)
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval", "~/Content/ueditor/ueditor.config.js", "~/Content/ueditor/ueditor.all.js")
    <script type="text/javascript">
        var editorOption = {
            initialFrameWidth: 784,
            initialFrameHeight: 400
        };
        var editor = new baidu.editor.ui.Editor(editorOption);
        editor.render('Content');
        $('form').submit(function () {
            $('#Content').val(editor.getContent());
        });
    </script>
}

 

其中，下面这点JS代码就是初始化 UEditor 的代码

 

<script type="text/javascript">
        var editorOption = {
            initialFrameWidth: 784,
            initialFrameHeight: 400
        };
        var editor = new baidu.editor.ui.Editor(editorOption);
        editor.render('Content');
        $('form').submit(function () {
            $('#Content').val(editor.getContent());
        });
    </script>

 

在浏览器上输入URL：http://localhost:10223/Post/Create

 

 

提交后……(*^__^*) 嘻嘻……出错了：

从客户端(Content="<p style="text-align...")中检测到有潜在危险的 Request.Form 值。

修改相应的 Action 代码如下

[HttpPost]
        [ValidateInput(false)]
        [ValidateAntiForgeryToken]
        public async Task<ActionResult> Create([Bind(Include="Id,Title,Content,CreateDate,hits,CategoryId")] Post post)
        {
            if (ModelState.IsValid)
            {
                db.Posts.Add(post);
                await db.SaveChangesAsync();
                return RedirectToAction("Index");
            }

            ViewBag.CategoryId = new SelectList(db.Categories, "Id", "Title", post.CategoryId);
            return View(post);
        }

 

最关键的就是：[ValidateInput(false)] 这句了，按下 Shift+F6 生成当前项目，然后再提交。

 

 

OK，UEditor 已经整合好了，下面就是本文的重点了

UEditor 上传图片

将 ~/Content/ueditor/net/imageUp.ashx 文件删掉，新建一个“一般处理程序”，命名为 imageUp.ashx 编写如下代码

 

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

namespace ShowPin.Web.Content.ueditor.net
{
    /// <summary>
    /// imageUp 的摘要说明
    /// </summary>
    public class imageUp : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            if (!String.IsNullOrEmpty(context.Request.QueryString["fetch"]))
            {
                context.Response.AddHeader("Content-Type", "text/javascript;charset=utf-8");
                context.Response.Write(String.Format("updateSavePath([{0}]);", String.Join(", ", Config.ImageSavePath.Select(x => "\"" + x + "\""))));
                return;
            }

            context.Response.ContentType = "text/plain";

            //上传配置
            int size = 2;           //文件大小限制,单位MB                             //文件大小限制，单位MB
            string[] filetype = { ".gif", ".png", ".jpg", ".jpeg", ".bmp" };         //文件允许格式


            //上传图片
            Hashtable info = new Hashtable();
            Uploader up = new Uploader();

            string path = up.getOtherInfo(context, "dir");
            if (String.IsNullOrEmpty(path))
            {
                path = Config.ImageSavePath[0];
            }
            else if (Config.ImageSavePath.Count(x => x == path) == 0)
            {
                context.Response.Write("{ 'state' : '非法上传目录' }");
                return;
            }

            info = up.upFile(context, path + '/', filetype, size);                   //获取上传状态

            string title = up.getOtherInfo(context, "pictitle");                   //获取图片描述
            string oriName = up.getOtherInfo(context, "fileName");                //获取原始文件名


            HttpContext.Current.Response.Write("{'url':'" + info["url"] + "','title':'" + title + "','original':'" + oriName + "','state':'" + info["state"] + "'}");  //向浏览器返回数据json数据
        }

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

 

其实就是上一般删除的那个文件的代码，只是……唉 才疏学浅，不知道怎么解释……然后可以看到，文件上传功能可以用了

 

 

默认是上传到这个路径，可以根据需要自行修改

 

嗯，今天就到这里吧