UEditor在asp.netMVC4中的使用，包括上傳功能，粘貼表格不顯示邊框問題

時間  2019-11-06
標籤 ueditor asp.netmvc4 asp netmvc 使用 包括 上傳 功能 粘貼 表格 顯示 邊框 問題 欄目 ASP 简体版
原文   原文鏈接

網頁編程中在線編輯器的使用仍是很重要的，最近研究了一下百度出的UEditor編輯器，把它結合到剛學的asp.netMVC+EF中，同時實現上傳資料（包括圖片，視頻等）功能，下面就以一個最簡單的新聞管理爲例介紹一下UEditor在MVC4中的使用。javascript

1、下載最新的UEditor版本，下載地址：http://ueditor.baidu.com/website/download.html，如圖css

2、建立數據庫，我使用sqlserver2012，數據庫：TestDemo，表：News以下：html

複製代碼 
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
複製代碼

 

3、VS2013中建立MVC4網站java

4、把下載好的UEditor進行解壓，重命名爲ueditor，並複製到VS工程下的Content文件夾下jquery

5、建立ＥＦ：web

6、若是運行網站中出現以下錯誤，可刪除UEditor文件夾下的Bin中的全部文件便可sql

 

 

7、建立控件器，這裏我簡單實現一下操做的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]去掉試試。

 

 8、各類View以下：asp.net

１.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>
複製代碼

9、最後一項，修改　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

一、找到下面的代碼，修改

複製代碼 
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內聯樣式）

 

 

二、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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程