一：UEditor 是干什么的？

UEditor 是一個(gè)網(wǎng)頁的富文本編輯器，用于發(fā)布文章，比如你的官網(wǎng)需要發(fā)布一篇新聞，就可以使用UEditor 來完成新聞的錄入。

二：UEditor 的工作原理？

UEditor 包含常規(guī)的圖文錄入和表情，文件的操作等等。首先你在UEditor 中將你要寫的新聞的內(nèi)容寫好，里面可能包含文字、數(shù)字、html和css的代碼等等，簡(jiǎn)單的字符就不用說了，直接存到數(shù)據(jù)庫里面。圖片的處理方式是：先將圖片上傳到網(wǎng)站所在的服務(wù)器（本地開發(fā)就是上傳到自己的電腦），然后服務(wù)器返回該圖片在服務(wù)器上面的路徑，并且將這個(gè)路徑放在新聞內(nèi)容的html中，用img標(biāo)簽裹著。最后還是將新聞內(nèi)容看作一個(gè)字符串保存到數(shù)據(jù)庫里面，當(dāng)你要在官網(wǎng)前臺(tái)界面查看該新聞的時(shí)候，就直接讀取數(shù)據(jù)庫，圖片因?yàn)樗４媪藞D片的相對(duì)路徑，就可以直接在瀏覽器中顯示出來了。

三：具體的使用步驟：

1：將UEditor 引入到項(xiàng)目中：官網(wǎng)下載鏈接：http://ueditor.baidu.com/website/download.html我下載的是[1.4.3.3 .NET 版本]解壓之后得到ueditor1_4_3_3-utf8-net，直接將ueditor1_4_3_3-utf8-net中的utf8-net文件夾復(fù)制到項(xiàng)目中：

2：在自己的頁面中引入相關(guān)腳本文件：<script src="~/Plugin/utf8-net/ueditor.config.js"></script>這個(gè)是插件的配置文件，依據(jù)不同的項(xiàng)目類型和項(xiàng)目結(jié)構(gòu)作相應(yīng)的調(diào)整。<script src="~/Plugin/utf8-net/ueditor.all.min.js"></script>這個(gè)是插件的源文件，是核心文件，不做二次開發(fā)的話基本不用動(dòng)它，但是如果使用插件的時(shí)候出問題了，可以在這個(gè)里面打斷點(diǎn)調(diào)試。<script src="~/Plugin/utf8-net/lang/zh-cn/zh-cn.js"></script>這個(gè)是語言包文件，直接引用即可，沒必要糾結(jié)。

3：初始化插件：html：<div class="newscontent"><script id="editor" type="text/plain" style="width:1024px;height:500px;"></script></div>js：<script type="text/javascript">var ue = UE.getEditor('editor');</script>不出什么意外的話，現(xiàn)在運(yùn)行頁面，即可看到：

4：添加一個(gè)純文本新聞：在瀏覽器頁面中輸入文本信息，點(diǎn)擊“保存”按鈕，觸發(fā)一個(gè)js函數(shù)， 通過 var newscontent = ue.getContent()獲取你輸入的信息，其實(shí) ue 就是 UE.getEditor('editor')。

好啦，到這里，富文本編輯器中的數(shù)據(jù)已經(jīng)獲取到了，可以看到，它里面實(shí)際是由html包含著文本，并且相關(guān)的樣式也在html標(biāo)簽中。5：添加一個(gè)圖文結(jié)合的新聞：1：這里首先要改一下Ueditor 的配置文件：ueditor.config.js文件中的serverUrl：源文件是：serverUrl: URL + "net/controller.ashx"這里必須得插播一下：controller.ashx其實(shí)就是處理圖片上傳的一個(gè)一般處理程序，首先在瀏覽器中選中圖片，然后Ueditor創(chuàng)建xhr，將圖發(fā)送給controller，最后controller將圖片保存到服務(wù)器所在的硬盤中，在xhr的回調(diào)事件中獲取從controller.ashx返回的圖片的相對(duì)地址，將這個(gè)地址展示在Ueditor編輯器中。好了，回到serverUrl，這個(gè)參數(shù)就是獲取到controller.ashx這個(gè)一般處理程序的url，然后向一般處理程序發(fā)送xhr。調(diào)試的時(shí)候我看到URL其實(shí)就是ueditor.config.js這個(gè)文件所在的目錄，所以只要ueditor.config.js文件和net文件夾在同一級(jí)，這個(gè)serverUrl無需改動(dòng)。config.json文件中的imageUrlPrefix和imagePathFormat：imagePathFormat是上傳保存路徑,可以自定義保存路徑和文件名格式，就是你要將圖片保存到服務(wù)器的那個(gè)文件夾下面。{yyyy}{mm}{dd}：這個(gè)是插件的一個(gè)算法算出來的，實(shí)際上就是當(dāng)前年月日，這里的作用是用當(dāng)前年月日創(chuàng)建一個(gè)文件夾{time}{rand:6}：這個(gè)就是圖片文件的名稱了，time是當(dāng)前時(shí)間，rand：6是產(chǎn)生一個(gè)隨機(jī)數(shù)imageUrlPrefix是圖片訪問路徑前綴，這個(gè)我是直接給了一個(gè)空格，其實(shí)是因?yàn)樯蟼鞯臅r(shí)候已經(jīng)將完整的相對(duì)路徑存到了數(shù)據(jù)庫，讀取的時(shí)候就不必加“圖片訪問路徑前綴”了，但是不加空格圖片還無法展示出來，我猜測(cè)是imageUrlPrefix如果為空字符串就無法通過某一個(gè)if語句。這部分寫的有點(diǎn)亂，可能是對(duì)這部分我掌握的也不是太到位。相關(guān)截圖如下：

2：頁面上面選擇一張圖片，并上傳：

3：點(diǎn)擊保存，將新聞內(nèi)容保存到數(shù)據(jù)庫中去：

總結(jié)

以上是生活随笔為你收集整理的UEditor ASP.NET 版使用教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。