1.首先是UEditor的文檔結(jié)構(gòu)

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

_src：JS文件

dialogs：彈出對話框?qū)馁Y源和JS文件

lang：語言包文件

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

themes：樣式圖片和樣式文件

third-party：第三方插件

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

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

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

2.系統(tǒng)配置

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

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

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

其中最重要的配置是第28行關(guān)于URL參數(shù)的配置，關(guān)系到圖片上傳，處理等路徑，需要配置為uediotr在網(wǎng)站的相對路徑或者絕對路徑。如我的項目名稱為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.創(chuàng)建編輯器實例及其DOM容器

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

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

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

 script type= text/plain id= myEditor >
 6.前后臺數(shù)據(jù)交互
 對于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 //此處的參數(shù)值為編輯器的id值 var editor_a1 = new baidu.editor.ui.Editor({ //這里可以選擇自己需要的工具按鈕名稱,此處僅選擇如下五個 toolbars:[[ FullScreen , Source , Undo , Redo , Bold ]], //focus時自動清空初始化時的內(nèi)容 autoClearinitialContent:true, //更多其他參數(shù)，請參考editor_config.js中的配置項 editor_a1.render( myEditor1  /script  /body  /html
【相關(guān)推薦】
1. 免費html在線視頻教程
2. html開發(fā)手冊
3. VeVb.com原創(chuàng)html5視頻教程
以上就是一款好用的HTML編輯器（UEditor）使用教程的詳細內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。