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

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

_src：JS文件

dialogs：彈出對(duì)話框?qū)?yīng)的資源和JS文件

lang：語言包文件

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

themes：樣式圖片和樣式文件

third-party：第三方插件

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

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

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

2.系統(tǒng)配置

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

以下是自己定義的一個(gè)簡(jiǎn)單配置：

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

其中最重要的配置是第28行關(guān)于URL參數(shù)的配置，關(guān)系到圖片上傳，處理等路徑，需要配置為uediotr在網(wǎng)站的相對(duì)路徑或者絕對(duì)路徑。如我的項(xiàng)目名稱為t，根目錄為www，則URL的值設(shè)置如下：

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)建編輯器實(shí)例及其DOM容器

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

5.設(shè)置選項(xiàng)并且渲染編輯器

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

 script type= text/plain id= myEditor >
 6.前后臺(tái)數(shù)據(jù)交互
 對(duì)于PHP可以直接用$_POST[ ueditorName ]獲取編輯器的值，其中ueditorName的值為初始化編輯器時(shí)ueditor的name值。
 以下為完整的渲染2個(gè)ueditor的代碼
 !DOCTYPE HTML  html  head  meta http-equiv= Content-Type content= text/html; charset=UTF-8  title UEditor /title  !--以下為引入U(xiǎn)Editor資源部分--  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  !--以上為引入U(xiǎn)Editor資源部分--  /head  body  form action= test.php method= post name= myForm  !--以下引入U(xiǎn)Editor編輯器界面--  script type= text/plain id= myEditor name= myContent 這是一個(gè)測(cè)試還是一個(gè)測(cè)試 /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({ //這里可以選擇自己需要的工具按鈕名稱,此處僅選擇如下五個(gè) toolbars:[[ FullScreen , Source , Undo , Redo , Bold ]], //focus時(shí)自動(dòng)清空初始化時(shí)的內(nèi)容 autoClearinitialContent:true, //更多其他參數(shù)，請(qǐng)參考editor_config.js中的配置項(xiàng) editor_a1.render( myEditor1  /script  /body  /html
【相關(guān)推薦】
1. 免費(fèi)html在線視頻教程
2. html開發(fā)手冊(cè)
3. VeVb.com原創(chuàng)html5視頻教程
以上就是一款好用的HTML編輯器（UEditor）使用教程的詳細(xì)內(nèi)容，html教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。