ASP.NET MVC5 中百度ueditor富文本編輯器的使用
隨著網站信息發布內容越來越多，越來越重視美觀，富文本編輯就是不可缺少的了，眾多編輯器比較後我選了百度的ueditor富文本編輯器。
百度ueditor富文本編輯器分為兩種一種是完全版的ueditor，另一種是ueditor的迷你版umeditor。
一、我們先講完全版的ueditor。
1、建立數據模型。
2、建立對應的控制器和視圖。
3、訪問http://ueditor.baidu.com/website/download.html 進入開發版的下載頁面，下載.net UTF-8版本，現在最新的是1.4.3.3版。
4、下載後解壓，將文件夾更名為ueditor，文件夾裏面就是源程序。
5、將此ueditor文件夾復制到自己MVC項目的Content文件中。
6、打開需要改造的Create視圖和Edit視圖，相關的操作方式是完全一樣的。
7、找到需要改造的地方，將原來的註釋掉或者刪除掉。
[email protected](model => model.文檔內容, new { htmlAttributes = new { @class = "form-control" } })
現在直接用 @Html.TextAreaFor(model => model.文檔內容,htmlAttributes:new { @id="neirong"}) 替換掉。
[email protected]
[email protected]("~/bundles/jqueryval", "~/Content/ueditor/ueditor.config.js", "~/Content/ueditor/ueditor.all.js")
9、緊接著上面的代碼，在下面寫如下代碼，這裏我沒有做任何配置設置，因為我的全站不存在第二種樣式，所以我直接在後面的ueditor配置文件中設置了。
<script type="text/javascript">
var editor = new baidu.editor.ui.Editor();
</script>
下面是做了參數配置的
<script type="text/javascript">
var editorOption = {
initialFrameWidth: 784,
initialFrameHeight: 400
};
var editor = new baidu.editor.ui.Editor(editorOption);
editor.render(‘neirong‘);
</script>
10、現在運行就應該能看到富文本編輯效果了，但是這樣還不行，很多功能還不正常需要對ueditor進行。
11、打開Content/ueditor/ueditor.config.js。
約在22行出 添加 window.UEDITOR_HOME_URL = "~/Content/ueditor/"; //官方說明上寫的很明白，如果前面沒有設置，就必須設置window.UEDITOR_HOME_URL 的根路徑值。
再往下面的就是配置的參數了，文件上方的官方提示已經說了“所有被註釋的配置項均為UEditor默認值。”
所以根據自己的需要，刪除參數前面的“//”就行了，一定不要把後面的逗號也刪除了。
12、配置config.json。打開Content/ueditor/net文件夾下的config.json文件。
將圖片、塗鴉、視頻、附件等的圖片訪問前綴改為"/Content/ueditor/net/"。如圖片訪問前綴 "imageUrlPrefix": "/Content/ueditor/net/"，這裏可以用UrlPrefix": "/Content/ueditor/net/替換掉原來的UrlPrefix": "/ueditor/net/
如圖：如果不配置前綴路徑，能正確上傳圖片等，但是不能在線編輯、不能訪問。圖片就顯示成一個紅叉。
同時，也可以配置其他項。例如"imageMaxSize": 2048000, /* 上傳大小限制，單位B */ 等等。
13、然後在相關視圖的控制器中Create和Edit 的httpPost方法中加入 [ValidateInput(false)]屬性。 然後數據庫將html標簽保存到數據庫中。如果不加入此註解，表單將不能正確的提交，並出現 ”潛在的風險的Request.Form值。
14、在系統自動創建的Detials操作方法的視圖中找到對應的顯示位置，[email protected](model => model.文檔內容)[email protected](Model.文檔內容)，也就是對數據提取出來的Content 字段的html標簽不進行編碼。
這樣就能正常使用了。
二、ueditor的迷你版umeditor。
迷你版umeditor最新的.net版 為1.2.2 編譯時間為2016-12-22 官網不知道為什麽不能直接下。我是從官網“UM演示”裏面的Github下載地址下載的。因為是迷你版，很多步驟還是一樣的。
1、同ueditor的1。
2、同ueditor的2。
3、下載後解壓，將文件夾更名為umeditor，文件夾裏面就是源程序。文件名必須是這個，否則後面會麻煩。
4、
ASP.NET MVC5 中百度ueditor富文本編輯器的使用