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>