在上篇《使用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;
}
}
}
}
其实就是上一般删除的那个文件的代码，只是……唉 才疏学浅，不知道怎么解释……然后可以看到，文件上传功能可以用了
默认是上传到这个路径，可以根据需要自行修改
嗯，今天就到这里吧