UEditor在asp.netMVC4中的使用，包括上传功能，粘贴表格不显示边框问题
网页编程中在线编辑器的使用还是很重要的，最近研究了一下百度出的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)]，否则浏览网页会报错,
如保存数据时出错，可以把这个[ValidateAntiForgeryToken]去掉试试。
八、各种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文件下，所以要改。
现在已完成所有修改。
-------------------------------------------------------
获取内容是 getContent或getContentTxt
var ue = UE.getEditor('container');
//获取html内容
var html = ue.getContent();
//获取纯文本内容
var text = ue.getContentTxt();
赋值时用
ue.ready(function() {//编辑器初始化完成再赋值
ue.setContent(proinfo); //赋值给UEditor
});
最后一点，要注意，从ueditor官网下载源码使用时，发现从word粘贴过来的表格不显示边框，这需要下面方面修改：
打开ueditor.all.js
1、找到下面的代码，修改
utils.each(tables, function (table) {
removeStyleSize(table, true);
domUtils.removeAttributes(table, ['style']); //改这里，原来是 ['style', 'border']
utils.each(domUtils.getElementsByTagName(table, "td"), function (td) {
if (isEmptyBlock(td)) {
domUtils.fillNode(me.document, td);
}
removeStyleSize(td, true);
});
});
这是为了不让UEditor去掉粘贴的表格的边框，也就是table元素的border属性（不是border内联样式）
2、UEditor插入的表格实际是没有边框的，编辑器中看到边框，其实是因为编辑器里面(<iframe>中)有下面这个全局css
td,th{ border:1px solid #DDD; }
但是前台展示是没有这段全局css的，所以导致看不到边框。
我们可以让编辑器中无边框的表格，显示成虚线灰色的边框，这也是其他很多html编辑器的处理方式。
找到并修改下面的代码
utils.cssRule('table',
//选中的td上的样式
'.selectTdClass{ padding: 0px; line-height: 1.8; color: rgb(128, 0, 0);">' +
'table.noBorderTable td,table.noBorderTable th,table.noBorderTable caption{border:1px dashed #ddd !important}' +
//插入的表格的默认样式
'table{margin-bottom:10px;border-collapse:collapse;display:table;}' +
'td,th{padding: 5px 10px;border: 1px dashed #DDD;}' + //这里修改 1px solid #DDD 为 1px dashed #DDD
'caption{border:1px dashed #DDD;border-bottom:0;padding:3px;text-align:center;}' +
'th{border-top:1px dashed #BBB;}' + //这里修改 1px solid #BBB 为 1px dashed #BBB
'table tr.firstRow th{border-top-width:2px;}' +
'.ue-table-interlace-color-single{ } .ue-table-interlace-color-double{ background-color: #f7faff; }' +
'td p{margin:0;padding:0;}', me.document);
目的是让全局的td/th边框样式显示为灰色虚线
这样应该能显示表格了，但表格显示是双线的，我们可以在显示页中加入样式：
<style>
table {
border-collapse: collapse;
}
</style>
浙公网安备 33010602011771号