网页编程中在线编辑器的使用还是很重要的，最近研究了一下百度出的UEditor编辑器，把它结合到刚学的asp.netMVC+EF中，同时实现上传资料（包括图片，视频等）功能，下面就以一个最简单的新闻管理为例介绍一下UEditor在MVC4中的使用。
一、下载最新的UEditor版本，下载地址：http://ueditor.baidu.com/website/download.html，如图
二、创建数据库，我使用sqlserver2012，数据库：TestDemo，表：News如下：
USE [TestDemo]
GO
/****** Object: Table [dbo].[News] Script Date: 2015/5/11 22:06:57 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[News](
[id] [int] IDENTITY(1,1) NOT NULL,
[title] [nvarchar](50) NULL,
[content] [nvarchar](max) NULL,
CONSTRAINT [PK_News] PRIMARY KEY CLUSTERED
(
[id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO
三、VS2013中创建MVC4网站
四、把下载好的UEditor进行解压，重命名为ueditor，并复制到VS工程下的Content文件夹下
五、创建ＥＦ：
六、如果运行网站中出现如下错误，可删除UEditor文件夹下的Bin中的所有文件即可
七、创建控件器，这里我简单实现一下操作的News的数据表增删改查,如下代码，
public class HomeController : Controller
{
private TestDemoEntities db = new TestDemoEntities();
//
// GET: /Home/
public ActionResult Index()
{
return View(db.News.ToList());
}
//
// GET: /Home/Details/5
public ActionResult Details(int id = 0)
{
News news = db.News.Find(id);
if (news == null)
{
return HttpNotFound();
}
return View(news);
}
//
// GET: /Home/Create
public ActionResult Create()
{
return View();
}
//
// POST: /Home/Create
[HttpPost]
[ValidateAntiForgeryToken]
[ValidateInput(false)]
public ActionResult Create(News news)
{
if (ModelState.IsValid)
{
db.News.Add(news);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(news);
}
//
// GET: /Home/Edit/5
public ActionResult Edit(int id = 0)
{
News news = db.News.Find(id);
if (news == null)
{
return HttpNotFound();
}
return View(news);
}
//
// POST: /Home/Edit/5
[HttpPost]
[ValidateAntiForgeryToken]
[ValidateInput(false)]
public ActionResult Edit(News news)
{
if (ModelState.IsValid)
{
db.Entry(news).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
}
return View(news);
}
//
// GET: /Home/Delete/5
public ActionResult Delete(int id = 0)
{
News news = db.News.Find(id);
if (news == null)
{
return HttpNotFound();
}
return View(news);
}
//
// POST: /Home/Delete/5
[HttpPost, ActionName("Delete")]
[ValidateAntiForgeryToken]
public ActionResult DeleteConfirmed(int id)
{
News news = db.News.Find(id);
db.News.Remove(news);
db.SaveChanges();
return RedirectToAction("Index");
}
protected override void Dispose(bool disposing)
{
db.Dispose();
base.Dispose(disposing);
}
这里注意保存到数据库的actionresult中加标签 [ValidateInput(false)]，否则浏览网页会报错
八、各种View如下：
１.Index:
@model IEnumerable<NetMVCUEditorDemo.Models.News>
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table>
<tr>
<th>
@Html.DisplayNameFor(model => model.title)
</th>
<th>
@Html.DisplayNameFor(model => model.content)
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.title)
</td>
<td>
@Html.GetStringByLen(@item.content)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.id }) |
@Html.ActionLink("Details", "Details", new { id=item.id }) |
@Html.ActionLink("Delete", "Delete", new { id=item.id })
</td>
</tr>
}
</table>
Create view:
@model NetMVCUEditorDemo.Models.News
@{
ViewBag.Title = "Create";
}
<h2>Create</h2>
@using (Html.BeginForm()) {
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<fieldset>
<legend>News</legend>
<div class="editor-label">
@Html.LabelFor(model => model.title)
</div>
<div class="editor-field">
@Html.TextBoxFor(model => model.title)
@Html.ValidationMessageFor(model => model.title)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.content)
</div>
<div class="editor-field">
@Html.TextAreaFor(model => model.content)
@Html.ValidationMessageFor(model => model.content)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
<script type="text/javascript">
var ue = UE.getEditor(‘content‘);
</script>
3.Edit View
@model NetMVCUEditorDemo.Models.News
@{
ViewBag.Title = "Edit";
}
<h2>Edit</h2>
@using (Html.BeginForm()) {
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<fieldset>
<legend>News</legend>
@Html.HiddenFor(model => model.id)
<div class="editor-label">
@Html.LabelFor(model => model.title)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.title)
@Html.ValidationMessageFor(model => model.title)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.content)
</div>
<div class="editor-field">
@Html.TextAreaFor((model) => model.content)
@Html.ValidationMessageFor(model => model.content)
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
<script type="text/javascript">
var ue = UE.getEditor(‘content‘);
</script>
4.Details
@model NetMVCUEditorDemo.Models.News
@{
ViewBag.Title = "Details";
}
<h2>Details</h2>
<fieldset>
<legend>News</legend>
<div class="display-label">
@Html.DisplayNameFor(model => model.title)
</div>
<div class="display-field">
@Html.DisplayFor(model => model.title)
</div>
<div class="display-label">
@Html.DisplayNameFor(model => model.content)
</div>
<div class="display-field">
@Html.Raw(@Model.content)
</div>
</fieldset>
<p>
@Html.ActionLink("Edit", "Edit", new { id=Model.id }) |
@Html.ActionLink("Back to List", "Index")
</p>
5.Delete View
@model NetMVCUEditorDemo.Models.News
@{
ViewBag.Title = "Delete";
}
<h2>Delete</h2>
<h3>Are you sure you want to delete this?</h3>
<fieldset>
<legend>News</legend>
<div class="display-label">
@Html.DisplayNameFor(model => model.title)
</div>
<div class="display-field">
@Html.DisplayFor(model => model.title)
</div>
<div class="display-label">
@Html.DisplayNameFor(model => model.content)
</div>
<div class="display-field">
@Html.Raw(@Model.content)
</div>
</fieldset>
@using (Html.BeginForm()) {
@Html.AntiForgeryToken()
<p>
<input type="submit" value="Delete" /> |
@Html.ActionLink("Back to List", "Index")
</p>
}
在使用UEditor编辑器的网页中添加js引用 ：
<script src="~/Content/ueditor/ueditor.config.js"></script>
<script src="~/Content/ueditor/ueditor.all.min.js"></script>
我使用模板，所以上面两句添加到了_Layout.cshtml模板中了：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<script src="~/Content/ueditor/ueditor.config.js"></script>
<script src="~/Content/ueditor/ueditor.all.min.js"></script>
</head>
<body>
@RenderBody()
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>
九、最后一项，修改 UEditor编辑器上传图片或文件等资源的路径
修改此文件中所有UrlPrefix的路径，添加/Content/，这是资源访问的路径，由于我们把ueditor编辑器放在了Content文件下，所以要改。
现在已完成所有修改。
源码下载：
时间： 2024-10-10 12:29:28