ASP.NET MVC5 中百度ueditor富文本編輯器的使用

隨着網站信息發佈內容愈來愈多，愈來愈重視美觀，富文本編輯就是不可缺乏的了，衆多編輯器比較後我選了百度的ueditor富文本編輯器。

百度ueditor富文本編輯器分爲兩種一種是徹底版的ueditor，另外一種是ueditor的迷你版umeditor。

ueditor富文本編輯器的功能很強大，使用中會在其目錄下面會產生大量的數據，本人認爲應將ueditor放置在根目錄下，後期維護中謹慎對待。

1、咱們先講徹底版的ueditor。

一、創建數據模型。

二、創建對應的控制器和視圖。

三、訪問http://ueditor.baidu.com/website/download.html 進入開發版的下載頁面，下載.net UTF-8版本，如今最新的是1.4.3.3版。

四、下載後解壓，將文件夾改名爲ueditor，文件夾裏面就是源程序。

五、將此ueditor文件夾複製到本身MVC項目的根目錄中。

六、打開須要改造的Create視圖和Edit視圖，相關的操做方式是徹底同樣的。

七、找到須要改造的地方，將原來的註釋掉或者刪除掉。

    一般視圖自動生成的是@Html.EditorFor(model => model.文檔內容, new { htmlAttributes = new { @class = "form-control" } })

    如今直接用 @Html.TextAreaFor(model => model.文檔內容,htmlAttributes:new { @id="neirong"}) 替換掉。

八、而後找到底部的腳本代碼@Scripts.Render("~/bundles/jqueryval"）

    替換爲@Scripts.Render("~/bundles/jqueryval", "~/ueditor/ueditor.config.js", "~/ueditor/ueditor.all.js") 

九、緊接着上面的代碼，在下面寫以下代碼，這裏我沒有作任何配置設置，由於個人全站不存在第二種樣式，因此我直接在後面的ueditor配置文件中設置了。

官方示例中建議使用工廠方法getEditor建立和引用編輯器實例，若是在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例

<script type="text/javascript">

var nreditor = UE.getEditor('neirong'); 
</script>

下面是作了參數配置的

<script type="text/javascript">
var editorOption = {
initialFrameWidth: 784,
initialFrameHeight: 400
};
var editor = new baidu.editor.ui.Editor(editorOption);
editor.render('neirong');
</script>

十、如今運行就應該能看到富文本編輯效果了，可是這樣還不行，不少功能還不正常須要對ueditor進行。

十一、打開~/ueditor/ueditor.config.js。

      再往下面的就是配置的參數了，文件上方的官方提示已經說了「全部被註釋的配置項均爲UEditor默認值。」

     因此根據本身的須要，刪除參數前面的「//」就好了，必定不要把後面的逗號也刪除了。

十二、配置config.json。打開~/ueditor/net文件夾下的config.json文件。

若是是按照個人實施規則來的話，此文件不用動。若是有變更的話須要修改圖片訪問前綴 "imageUrlPrefix": "/ueditor/net/"。若是配置錯誤的前綴路徑，能正確上傳圖片等，可是不能在線編輯、不能訪問，圖片就顯示不正常。驗證是否正確的方法是在富文本編輯器裏上傳個圖片，若是能顯示此圖片則正常。

同時，也能夠配置其餘項。例如"imageMaxSize": 2048000, /* 上傳大小限制，單位B */  等等。

1三、而後在相關視圖的控制器中Create和Edit 的httpPost方法中加入 [ValidateInput(false)]屬性。 而後數據庫將html標籤保存到數據庫中。若是不加入此註解，表單將不能正確的提交，並出現 」潛在的風險的Request.Form值。

1四、在系統自動建立的Detials操做方法的視圖中找到對應的顯示位置，將原來的@Html.DisplayFor(model => model.文檔內容)改成@Html.Raw(Model.文檔內容)，也就是對數據提取出來的Content 字段的html標籤不進行編碼。

這樣就能正常使用了。

 

2、ueditor的迷你版umeditor。

迷你版umeditor最新的.net版 爲1.2.2  編譯時間爲2016-12-22   官網不知道爲何不能直接下。我是從官網「UM演示」裏面的Github下載地址下載的。由於是迷你版，不少步驟仍是同樣的。

一、同ueditor的1。

二、同ueditor的2。

三、下載後解壓，將文件夾改名爲umeditor，文件夾裏面就是源程序。文件名必須是這個，不然後面會麻煩。

四、官網不知道爲何不能直接下。我是從官網「UM演示」裏面的Github下載地址下載的。（好像官網也知道這個版本不正常，因此沒提供下載。別的版本都是1.2.3了）

五、將此umeditor文件夾複製到本身MVC項目的根目錄中。

六、同ueditor的六、7。

七、在視圖的<h2>前面添加

<link href="~/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">

八、而後找到底部的腳本代碼@Scripts.Render("~/bundles/jqueryval"）

    替換爲@Scripts.Render("~/bundles/jqueryval", "~/umeditor/third-party/jquery.min.js", "~/umeditor/umeditor.config.js", "~/umeditor/umeditor.min.js") 這裏新加了三個

九、緊接着上面的代碼，在下面寫以下代碼：

<script type="text/javascript">
var ueditor = UM.getEditor('neirong');   //這裏是um不是以前的UE了。
</script>

十、如今運行就應該能看到富文本編輯效果了。

十一、經測試這個版本的圖片不能正常上傳。因此我註釋掉了相關的功能，至關於只用了基本的文字編輯功能。

十二、同ueditor的13。

1三、同ueditor的14。