HTML編輯器UEditor的簡單使用
參考自：http://ueditor.baidu.com/website/document.html
關于HTML編輯器，試過FCKeditor，升級版的CKeditor，還有TinyMCE，最近在嘗試使用百度的UEditor。對比一下還是覺得UEditor的配置較簡單，上手快并且文檔和例子也很齊全。那么這里以UEditor1.2.3.0PHP版本UTF-8版為例梳理一下UEditor的使用流程。
1.首先是UEditor的文檔結構
_examples：編輯器各種版本的示例頁面
_src：JS文件
dialogs：彈出對話框對應的資源和JS文件
lang：語言包文件
PHP：文件上傳處理，遠程圖片抓取，圖片在線管理，屏幕截圖相關文件
themes：樣式圖片和樣式文件
third-party：第三方插件
editor_all.js：_src目錄下所有文件的打包文件
editor_all_min.js：editor_all.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" style="width:800px"> </script> <script type="text/plain" id="myEditor1" style="width:800px"> <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時自動清空初始化時的內容 //更多其他參數，請參考editor_config.js中的配置項 }); editor_a1.render( 'myEditor1' ); </script></pre>
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></pre>轉自：http://blog.csdn.net/fanteathy/article/details/7976705