一：UEditor 是干什么的？

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

二：UEditor 的工作原理？

UEditor 包含常規的圖文錄入和表情，文件的操作等等。首先你在UEditor 中將你要寫的新聞的內容寫好，里面可能包含文字、數字、html和css的代碼等等，簡單的字符就不用說了，直接存到數據庫里面。圖片的處理方式是：先將圖片上傳到網站所在的服務器（本地開發就是上傳到自己的電腦），然后服務器返回該圖片在服務器上面的路徑，并且將這個路徑放在新聞內容的html中，用img標簽裹著。最后還是將新聞內容看作一個字符串保存到數據庫里面，當你要在官網前臺界面查看該新聞的時候，就直接讀取數據庫，圖片因為它保存了圖片的相對路徑，就可以直接在瀏覽器中顯示出來了。

三：具體的使用步驟：

1：將UEditor 引入到項目中：官網下載鏈接：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文件夾復制到項目中：

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

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>不出什么意外的話，現在運行頁面，即可看到：

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

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

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

3：點擊保存，將新聞內容保存到數據庫中去：

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。