富文本編輯器UEditor的配置使用方法

UEditor是由百度前端研發團隊研發的所見即所得富文本web編輯器,具有輕量、可定製、注重用戶體驗等特點,開源基於MIT協議,允許自由使用和修改代碼。UEditor使用起來比較方便,功能強大,可滿足我們大部分的文本編輯需求,下面就給大家先簡單介紹一下UEditor如何在網站中配置使用。

工具/原料

UEditor編輯器程序文件

方法/步驟

百度搜尋【UEditor】,進入UEditor的官方首頁,點擊首頁中的【下載】按鈕,進入UEditor的下載頁面。

在下載頁面中我們依次選擇【開發版】面板——【.Net版本】中的UTF-8,彈出下載窗體,下載UEditor的代碼。

UEditor的代碼下載解壓後,裡面的內容如圖所示。

在這裡我新建一個ASP.NET的WebForm程序來演示UEditor的配置方法:在WebForm程序中新建一個文件夾ueditor,將剛才下載的UEditor的代碼添加到該文件夾下面。

新建一個ASPX頁面【Default_UEditor】,在該頁面中的<body>標籤中添加如圖所示的javascript代碼用來配置UEditor。其中,ueditor.config.js文件是編輯器的配置文件,ueditor.all.js文件開發版代碼合併的結果,代碼var ue = UE.getEditor('container')用來實例化UEditor編輯器。

最後在瀏覽器中瀏覽ASPX頁面【Default_UEditor】,可得到UEditor編輯器的簡單效果。

注意事項

因為ASPX頁面【Default_UEditor】與ueditor文件夾處於同一目錄下面,所以在ASPX頁面【Default_UEditor】中引用ueditor中的文件使用相對路徑:src=」ueditor/ueditor.all.js」即可。

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場