UEditor ASP.NET 版使用教程


一: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的過程,以后要多寫博客,感覺寫完了后對於掌握情況來說,提高了!


免責聲明!

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



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