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文件夹下
五、创建EF:
六、如果运行网站中出现如下错误,可删除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如下:
1.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{background-color:#edf5fa !important}' + '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;background-color:#F7F7F7;}' + //这里修改 1px solid #BBB 为 1px dashed #BBB 'table tr.firstRow th{border-top-width:2px;}' + '.ue-table-interlace-color-single{ background-color: #fcfcfc; } .ue-table-interlace-color-double{ background-color: #f7faff; }' + 'td p{margin:0;padding:0;}', me.document);
目的是让全局的td/th边框样式显示为灰色虚线
这样应该能显示表格了,但表格显示是双线的,我们可以在显示页中加入样式:
<style> table { border-collapse: collapse; } </style>
上面这方法解决的不是很完美,以后再改进