首頁 > 文章 > web前端 > 一款好用的HTML編輯器（UEditor）使用教學課程

一款好用的HTML編輯器（UEditor）使用教學課程

零下一度原創: 2017-05-04 14:45:235367瀏覽

關於HTML編輯器，試過FCKeditor，升級版的CKeditor，還有TinyMCE，最近在嘗試使用百度的UEditor。比較一下還是覺得UEditor的配置較簡單，上手快且文件和範例也很齊全。那麼這裡以UEditor1.2.3.0PHP版本UTF-8版為例梳理一下UEditor的使用流程。

1.首先是UEditor的文檔結構

HTML编辑器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:[[&#39;FullScreen&#39;, &#39;Source&#39;, &#39;Undo&#39;, &#39;Redo&#39;]]
//更多其他参数，请参考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( &#39;myEditor&#39; ); //此处的参数值为编辑器的id值

var editor_a1 = new baidu.editor.ui.Editor({
//这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
toolbars:[[&#39;FullScreen&#39;, &#39;Source&#39;, &#39;Undo&#39;, &#39;Redo&#39;,&#39;Bold&#39;]],
//focus时自动清空初始化时的内容
//更多其他参数，请参考editor_config.js中的配置项
});
editor_a1.render( &#39;myEditor1&#39; );
</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( &#39;myEditor&#39; ); //此处的参数值为编辑器的id值
    
    var editor_a1 = new baidu.editor.ui.Editor({
    //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
    toolbars:[[&#39;FullScreen&#39;, &#39;Source&#39;, &#39;Undo&#39;, &#39;Redo&#39;,&#39;Bold&#39;]],
    //focus时自动清空初始化时的内容
    autoClearinitialContent:true,
    //更多其他参数，请参考editor_config.js中的配置项
});
    editor_a1.render( &#39;myEditor1&#39; );
</script>
</body>
</html

【相关推荐】

1. 免费html在线视频教程

2. html开发手册

3. php.cn原创html5视频教程

以上是一款好用的HTML編輯器（UEditor）使用教學課程的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：詳解一個完美的HTML解析引擎（Jumony）下一篇：詳解一個完美的HTML解析引擎（Jumony）

看更多