關於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>登入後複製
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. php.cn原创html5视频教程
以上是一款好用的HTML編輯器（UEditor）使用教學課程的詳細內容。更多資訊請關注PHP中文網其他相關文章！
