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


隨着網站信息發布內容越來越多,越來越重視美觀,富文本編輯就是不可缺少的了,眾多編輯器比較后我選了百度的ueditor富文本編輯器。

百度ueditor富文本編輯器分為兩種一種是完全版的ueditor,另一種是ueditor的迷你版umeditor。

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

一、我們先講完全版的ueditor。

1、建立數據模型。

2、建立對應的控制器和視圖。

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

4、下載后解壓,將文件夾更名為ueditor,文件夾里面就是源程序。

5、將此ueditor文件夾復制到自己MVC項目的根目錄中。

6、打開需要改造的Create視圖和Edit視圖,相關的操作方式是完全一樣的。

7、找到需要改造的地方,將原來的注釋掉或者刪除掉。

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

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

8、然后找到底部的腳本代碼@Scripts.Render("~/bundles/jqueryval")

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

9、緊接着上面的代碼,在下面寫如下代碼,這里我沒有做任何配置設置,因為我的全站不存在第二種樣式,所以我直接在后面的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>

10、現在運行就應該能看到富文本編輯效果了,但是這樣還不行,很多功能還不正常需要對ueditor進行。

11、打開~/ueditor/ueditor.config.js。

      再往下面的就是配置的參數了,文件上方的官方提示已經說了“所有被注釋的配置項均為UEditor默認值。”

     所以根據自己的需要,刪除參數前面的“//”就行了,一定不要把后面的逗號也刪除了。

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

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

同時,也可以配置其他項。例如"imageMaxSize": 2048000, /* 上傳大小限制,單位B */  等等。

13、然后在相關視圖的控制器中Create和Edit 的httpPost方法中加入 [ValidateInput(false)]屬性。 然后數據庫將html標簽保存到數據庫中。如果不加入此注解,表單將不能正確的提交,並出現 ”潛在的風險的Request.Form值。

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

這樣就能正常使用了。

 

二、ueditor的迷你版umeditor。

迷你版umeditor最新的.net版 為1.2.2  編譯時間為2016-12-22   官網不知道為什么不能直接下。我是從官網“UM演示”里面的Github下載地址下載的。因為是迷你版,很多步驟還是一樣的。

1、同ueditor的1。

2、同ueditor的2。

3、下載后解壓,將文件夾更名為umeditor,文件夾里面就是源程序。文件名必須是這個,否則后面會麻煩。

4、官網不知道為什么不能直接下。我是從官網“UM演示”里面的Github下載地址下載的。(好像官網也知道這個版本不正常,所以沒提供下載。別的版本都是1.2.3了)

5、將此umeditor文件夾復制到自己MVC項目的根目錄中。

6、同ueditor的6、7。

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

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

8、然后找到底部的腳本代碼@Scripts.Render("~/bundles/jqueryval")

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

9、緊接着上面的代碼,在下面寫如下代碼:

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

10、現在運行就應該能看到富文本編輯效果了。

11、經測試這個版本的圖片不能正常上傳。所以我注釋掉了相關的功能,相當於只用了基本的文字編輯功能。

12、同ueditor的13。

13、同ueditor的14。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM