1.首先去官網下載編輯器：http://ueditor.baidu.com/website/download.html 我用的是asp.net mvc開發模式所以選的是asp
2.前端頁面必須引用的兩個文件，放在自己項目文件里創建個文件夾什么的然后引用
3.設置編輯器的大小
<div>
<script id="editor" type="text/plain" style="width:1024px;height:300px;">
</script>
</div>
4.如何取值和調用編輯器，取值有這四種方式是比較實用的。看你們喜歡使用哪一種，一種是純內容，有帶html格式的，有的帶你編輯的格式什么的
5.引用和頁面都調試好了以后是一下效果圖，頁面當然我用的是Layui框架
6.前端布局完了以后到了上傳數據了，上傳數據的時候我用的是：ajax 提交后台MVC控制器； 這里使用
ueditor編輯器提交帶 <html> 標簽時候提交數據會有個坑，如果數據不加密的話會提交不到后台，會報一個錯說數據會帶什么腳本注入攻擊不能提交到后台這個是在版本MVC4以后對數據傳輸有的一個特性，前端提交帶加密的內容就能提交到后台了
<script type="text/javascript"> //實例化編輯器 //建議使用工廠方法getEditor創建和引用編輯器實例，如果在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例 var ue = UE.getEditor('editor'); $(function () { $("#btn").click(function () { debugger; var title = $("#tltle").val(); var Class = $("#Class").find('option:selected').val(); var ue = UE.getEditor('editor').getContent(); //獲取帶html標簽的內容 var html = escape(ue); //給內容加密 if (title != "" && html != "") { if (title.length < 50) { $.ajax({ url: "/Left_B/Add_Gong_gao", type: "POST", //提交方式 dataType: 'text', data: { title: title, Class: Class, center: html }, success: function (msg) { if (msg > 0) { alert("發布成功"); window.location.reload(); } else { alert("發布失敗！"); } } }); } else { layer.msg("標題不能大於50個字符"); return false; } } else { layer.msg("請輸入完整信息"); return false; } }) }); </script>
7.我隨便輸入一些內容當然這是我網上隨便復制的哈....並非對的
（圖1）
（圖2）
在圖二就是點擊提交后，圖一的內容進行加密過的，就可以提交到后台了
8.這里是比較簡單的后端代碼，有了那個加密后數據就能提交到后端了，當然注釋部分是必須要對傳過來的數據進行解密，這樣就能看到傳過來是數據是什么東西了
控制器代碼
public int Add_Gong_gao(string title, string center, string Class)// --添加公告 { try { name = Session["Name"].ToString(); //這里給加密的數據進行解密 string Center = System.Web.HttpUtility.UrlDecode(center.ToString().Trim()); int result = bll.Add_Gong_gao(title, Center, Class, name); return result; } catch (Exception ex) { throw ex; } }
這里下面就是解密后的數據帶有html標簽和css什么都在，在編輯器編輯內容的時候會帶有所有內容的格式
9.上效果圖，發布這里是標題
10.點擊進去最終效果
11.當然這里在數據從數據庫取出放到頁面的視圖的時候又有一個問題數據怎么讓取出來的內容插入到頁面呢？
一般的數據庫傳什么取得時候就是什么，字符串就是字符串“xxxxxxxxxxx”，傳到頁面也是這樣的一串字符串，這里就不做演示了
解決方案：
ASP.NET MVC中@Html.Raw()的使用
可以自行百度，使用這個就能把原生帶<html>標簽的內容全部顯示在頁面
12.后端控制器代碼從數據庫拿到數據，我是放在 ViewBag.load_Wu 提交到前端，當然返回給前端有很多的方法，我只是用其中一種哈
13.前端接收，箭頭部分就是內容顯示區，加上這個就可以了讓帶標簽的內容全部顯示出來了，就是第10點的效果圖
@item.XXX 是自己定義的model的屬性
<div id="cen"> <!--內容--> @foreach (var item in @ViewBag.Center) { <div class="neirong" id="article"> <h1 id="articleTitle"> @item.LB001 </h1> <div class="laiyuan"> <span id="articleTime"> 日期:@item.time </span> <span id="articleSource"> 發布人： @item.LB004 </span> <span id="articleAuthor"> </span> </div> <div class="xian"></div> <div style="height:10px; width:100%;"></div> <div style="height:10px; width:100%;"></div> <div class="content" id="articleText"> <p> </p> <div class="TRS_Editor"> @Html.Raw(@item.LB002) </div> <p style="float:right;">（編輯：@item.LB004）</p> </div> <!--內容結束--> </div> } </div>
我自己的定義的model
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace Model { public partial class WULB { //id public int ID { get; set; } //標題 public string LB001 { get; set; } //內容 public string LB002 { get; set; } //類別 public int LB003 { get; set; } //發起人 public string LB004 { get; set; } //創建時間 public DateTime LB005 { get; set; } } }
圖片，附件，視屏上傳
1.找到包里的.json文件
2.打開找到圖片訪問路徑 箭頭那里，改成自己項目文件，后面的upload是編輯器自帶的文件夾，上傳的圖片或者文件都會在里面把前綴路路徑改對就行了，下面上效果圖，附件同下
3.上傳圖片效果圖
頁面最終效果
總結：
以上都是我個人的總結！也是一點點摸索才寫出來的，希望使用編輯器的小伙伴可以得到幫助！還有什么不明白的地方歡迎在下方留言，以上省略了一些基礎代碼只提供思路和部分代碼。
以上都是原創，若要轉載聲明出處！