1.首先是UEditor的文檔結構

_examples：編輯器各種版本的示例頁面

_src：JS文件

dialogs：彈出對話框對應的資源和JS文件

lang：語言包文件

PHP：文件上傳處理，遠程圖片抓取，圖片在線管理，屏幕截圖相關文件

themes：樣式圖片和樣式文件

third-party：第三方插件

editor_all.js：_src目錄下所有文件的打包文件

editor_all_min.js：editor_all.html' target='_blank'>js文件的壓縮版，可以在正式部署時才采用

editor_config.js：編輯器的配置文件

2.系統配置

UEditor的配置可以分為系統默認配置和用戶自定義配置兩種類型。系統默認配置分散在各個對應的核心或者插件文件之中，對用戶不可見。當用戶注釋掉自定義配置時起作用。用戶自定義配置包括兩種類型，一種位于editor_config.js文件之中，優先級高于系統默認配置；另一種位于實例化編輯器時傳入的參數中，優先級最高。默認情況下，UEditor在editor_congfig.js注釋掉了所有可以省略的配置項，采用系統默認配置，若取消注釋，則以該配置項為準；未注釋的配置項要求用戶必需按照項目實際填寫。

以下是自己定義的一個簡單配置：

 script type= text/javascript // 自定義的編輯器配置項,此處定義的配置項將覆蓋editor_config.js中的同名配置var editorOption = {//這里可以選擇自己需要的工具按鈕名稱,此處僅選擇如下四個toolbars:[[ FullScreen , Source , Undo , Redo ]]//更多其他參數，請參考editor_config.js中的配置項};

其中最重要的配置是第28行關于URL參數的配置，關系到圖片上傳，處理等路徑，需要配置為uediotr在網站的相對路徑或者絕對路徑。如我的項目名稱為t，根目錄為www，則URL的值設置如下：

URL = window.UEDITOR_HOME_URL|| /t/UEditor/ 

3.引入配置文件，JS文件和主題CSS文件

 meta http-equiv= Content-Type content= text/html; charset=UTF-8  script type= text/javascript src= UEditor/editor_config.js /script  script type= text/javascript src= UEditor/editor_all.js /script  link rel= stylesheet href= UEditor/themes/default/ueditor.css 

4.創建編輯器實例及其DOM容器

 form action= method= post name= myForm  !--以下引入UEditor編輯器界面--  script type= text/plain id= editor name= myContent /script //此處不設置name，則editor默認名字為 editorValue ，可以在 //editor_config.js中配置參數textarea，或者在此處設置 input type= submit name= submit value= upload /  /form 

5.設置選項并且渲染編輯器

如果需要有不同設置的ueditor，可以分別定義之后設置不同的自定義選項再渲染編輯器，

 script type= text/plain id= myEditor >
 6.前后臺數據交互
 對于PHP可以直接用$_POST[ ueditorName ]獲取編輯器的值，其中ueditorName的值為初始化編輯器時ueditor的name值。
 以下為完整的渲染2個ueditor的代碼
 !DOCTYPE HTML  html  head  meta http-equiv= Content-Type content= text/html; charset=UTF-8  title UEditor /title  !--以下為引入UEditor資源部分--  script type= text/javascript src= UEditor/editor_config.js /script  script type= text/javascript src= UEditor/editor_all.js /script  link rel= stylesheet href= UEditor/themes/default/ueditor.css  !--以上為引入UEditor資源部分--  /head  body  form action= test.php method= post name= myForm  !--以下引入UEditor編輯器界面--  script type= text/plain id= myEditor name= myContent 這是一個測試還是一個測試 /script  input type= submit name= submit value= upload /  /form  script type= text/plain id= myEditor1 p 這里我可以寫一些輸入提示 /p /script  script type= text/javascript  var editor_a = new baidu.editor.ui.Editor(); editor_a.render( myEditor //此處的參數值為編輯器的id值 var editor_a1 = new baidu.editor.ui.Editor({ //這里可以選擇自己需要的工具按鈕名稱,此處僅選擇如下五個 toolbars:[[ FullScreen , Source , Undo , Redo , Bold ]], //focus時自動清空初始化時的內容 autoClearinitialContent:true, //更多其他參數，請參考editor_config.js中的配置項 editor_a1.render( myEditor1  /script  /body  /html
【相關推薦】
1. 免費html在線視頻教程
2. html開發手冊
3. VeVb.com原創html5視頻教程
以上就是一款好用的HTML編輯器（UEditor）使用教程的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。