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