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

來源：懂視網責編：小采時間：2020-11-27 15:33:25

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

一款好用的HTML編輯器（UEditor）使用教程:關于HTML編輯器，試過FCKeditor，升級版的CKeditor，還有TinyMCE，最近在嘗試使用百度的UEditor。對比一下還是覺得UEditor的配置較簡單，上手快并且文檔和例子也很齊全。那么這里以UEditor1.2.3.0PHP版本UTF-8版為例梳理一下UEditor的使用流程

推薦度：

點擊下載本文 文檔為doc格式

導讀一款好用的HTML編輯器（UEditor）使用教程:關于HTML編輯器，試過FCKeditor，升級版的CKeditor，還有TinyMCE，最近在嘗試使用百度的UEditor。對比一下還是覺得UEditor的配置較簡單，上手快并且文檔和例子也很齊全。那么這里以UEditor1.2.3.0PHP版本UTF-8版為例梳理一下UEditor的使用流程

關于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:[['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視頻教程

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com