我們在做網(wǎng)站的時(shí)候，網(wǎng)站后臺(tái)系統(tǒng)一般都會(huì)用到web編輯器，今天筆者就給大家推薦一款百度UEditor編輯器。關(guān)于這款百度UEditor編輯器官網(wǎng)上也有簡單的教程，不過看著比較費(fèi)勁，今天筆者就跟大家分享一下百度UEditor編輯器使用教程與使用方法，希望對大家有所幫助。

第一：百度UEditor編輯器的官方下載地址

ueditor 官方地址：http://ueditor.baidu.com/website/index.html

開發(fā)文檔地址：http://ueditor.baidu.com/website/document.html

下載地址：http://ueditor.baidu.com/website/download.html （這里可選開發(fā)版，或MINI版）

第二：百度UEditor編輯器的功能版本選擇

當(dāng)我們進(jìn)入百度UEditor編輯器官網(wǎng)點(diǎn)擊下載選項(xiàng)后，我們發(fā)現(xiàn)一共有兩個(gè)版本供我們選擇，一個(gè)是UBuilder,一個(gè)是開發(fā)版，通過下面注釋的紅色小字我們可以了解到UBuilder和開發(fā)版的區(qū)別。一般情況下我們選擇UBuilder版本即可。

跟我們以往下載軟件的方式不同，UEditor采用選擇性下載。首先是可見功能的選擇，共有基本，插入，格式化，表格四大組，每組下面都有若干功能按鈕，我們可以根據(jù)自己的需求來進(jìn)行選擇，如果雙擊四大組則表示全選該組按鈕。如果對選擇的按鈕不滿意還可以點(diǎn)擊清空選擇，有一點(diǎn)要提示的是如果點(diǎn)擊清空選擇會(huì)清楚掉你原先做過的所有選擇。

接著就是隱藏功能，語言，服務(wù)端版本的選擇，隱藏功能默認(rèn)的是全選，如非必要還是不要更改為好。語言選項(xiàng)共分為了中文和英文兩種，默認(rèn)的是只下載中文語言包，如果你有需要用到英文的話可以把英文包也加上。服務(wù)端版本目前提供了三種，分別為PHP，.NET，JSP，選擇完畢后我們就可以點(diǎn)擊下載資源包了。

第三：百度UEditor編輯器的配置方法技巧

1、從官網(wǎng)上下載完整源碼包，解壓到任意目錄，解壓后的源碼目錄結(jié)構(gòu)如下所示：

_examples：編輯器完整版的示例頁面

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

themes：樣式圖片和樣式文件 php/jsp/.net：涉及到服務(wù)器端操作的后臺(tái)文件，根據(jù)你選擇的不同后臺(tái)版本，這里也會(huì)不同，這里我們選擇php

third-party：第三方插件(包括代碼高亮，源碼編輯等組件）

editor_all.js：_src目錄下所有文件的打包文件（用于發(fā)布版本）

editor_api.js: API接口配置文件（開發(fā)版本）

editor_all_min.js：editor_all.js文件的壓縮版，建議在正式部署時(shí)才采用

editor_config.js：編輯器的配置文件，建議和編輯器實(shí)例化頁面置于同一目錄

2、編輯器的實(shí)例化頁面，導(dǎo)入編輯器需要的三個(gè)入口文件，示例代碼如下：

<script type="text/javascript" charset="utf-8" src="../umeditor.config.js"></script>

<!--使用版-->

<!--<script type="text/javascript" charset="utf-8" src="../umeditor.all.js"></script>-->

<!--開發(fā)版-->

<script type="text/javascript" charset="utf-8" src="editor_api.js"></script>

<script type="text/javascript" src="../lang/zh-cn/zh-cn.js"></script>

3、然后在編輯器的實(shí)例化頁面中創(chuàng)建編輯器實(shí)例及其DOM容器，示例代碼如下：

<textarea name="后臺(tái)取值的key" id="myEditor">這里寫你的初始化內(nèi)容</textarea>

<script type="text/javascript">

var editor = new UE.ui.Editor();

editor.render("myEditor");

//1.2.4以后可以使用一下代碼實(shí)例化編輯器

//UE.getEditor('myEditor')

</script>

4、在editor_config.js中查找URL變量配置編輯器在你項(xiàng)目中的路徑。

官網(wǎng)示例：

//強(qiáng)烈推薦以這種方式進(jìn)行絕對路徑配置

URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/";

我的配置：

(function () {

/**

* 編輯器資源文件根路徑。它所表示的含義是：以編輯器實(shí)例化頁面為當(dāng)前路徑，指向編輯器資源文件（即dialog等文件夾）的路徑。

* 鑒于很多同學(xué)在使用編輯器的時(shí)候出現(xiàn)的種種路徑問題，此處強(qiáng)烈建議大家使用"相對于網(wǎng)站根目錄的相對路徑"進(jìn)行配置。

* "相對于網(wǎng)站根目錄的相對路徑"也就是以斜杠開頭的形如"/myProject/umeditor/"這樣的路徑。

* 如果站點(diǎn)中有多個(gè)不在同一層級(jí)的頁面需要實(shí)例化編輯器，且引用了同一UEditor的時(shí)候，此處的URL可能不適用于每個(gè)頁面的編輯器。

* 因此，UEditor提供了針對不同頁面的編輯器可單獨(dú)配置的根路徑，具體來說，在需要實(shí)例化編輯器的頁面最頂部寫上如下代碼即可。當(dāng)然，需要令此處的URL等于對應(yīng)的配置。

* window.UMEDITOR_HOME_URL = "/xxxx/xxxx/";
*/ 
/**
* @author wusuopubupt
* @date 2013-10-24
* 
* set window.UMEDITOR_HOME_URL = "/ueditor/";
* 
* */ 
window.UMEDITOR_HOME_URL = "/ueditor/"; //注意就是這里！ 
var URL = window.UMEDITOR_HOME_URL || (function(){ 
function PathStack() { 

5、如果用editor_api.js （也就是不用editor.all.js）開發(fā)時(shí),打開editor_api.js,代碼如下

/**
* 開發(fā)版本的文件導(dǎo)入
*/ 
(function (){ 
var paths = [ 
'editor.js', 
'core/browser.js', 
'core/utils.js', 
'core/EventBase.js', 
'core/dtd.js', 
'core/domUtils.js', 
'core/Range.js', 
'core/Selection.js', 
'core/Editor.js', 
'core/filterword.js', 
'core/node.js', 
'core/htmlparser.js', 
'core/filternode.js', 
'plugins/inserthtml.js', 
'plugins/image.js', 
'plugins/justify.js', 
'plugins/font.js', 
'plugins/link.js', 
'plugins/print.js', 
'plugins/paragraph.js', 
'plugins/horizontal.js', 
'plugins/cleardoc.js', 
'plugins/undo.js', 
'plugins/paste.js', 
'plugins/list.js', 
'plugins/source.js', 
'plugins/enterkey.js', 
'plugins/preview.js', 
'plugins/basestyle.js', 
'plugins/video.js', 
'plugins/selectall.js', 
'plugins/removeformat.js', 
'plugins/keystrokes.js', 
'plugins/dropfile.js', 
'ui/widget.js', 
'ui/button.js', 
'ui/toolbar.js', 
'ui/menu.js', 
'ui/dropmenu.js', 
'ui/splitbutton.js', 
'ui/colorsplitbutton.js', 
'ui/popup.js', 
'ui/scale.js', 
'ui/colorpicker.js', 
'ui/combobox.js', 
'ui/buttoncombobox.js', 
'ui/modal.js', 
'ui/tooltip.js', 
'ui/tab.js', 
'ui/separator.js', 
'ui/scale.js', 
'adapter/adapter.js', 
'adapter/button.js', 
'adapter/fullscreen.js', 
'adapter/dialog.js', 
'adapter/popup.js', 
'adapter/imagescale.js', 
'adapter/autofloat.js', 
'adapter/source.js', 
'adapter/combobox.js' 
], 
/**
* @author wusuopubupt
* @date 2013-10-24
* 
* modified baseURL = '/ueditor/src/'; 
*/ 
baseURL = '/ueditor/src/'; 
for (var i=0,pi;pi = paths[i++];) { 
document.write('<script type="text/javascript" src="'+ baseURL + pi +'"></script>'); 
} 
})(); 

可以看到，這里有一項(xiàng)：baseURL，就是JS文件的路由，這里要根據(jù)ueditor_api.js文件的實(shí)際路徑去配置！

6、文件上傳問題：

打開ueditor.config.js，可以看到如下配置：

//圖片上傳配置區(qū)

,imageUrl:URL+"php/imageUp.php" //圖片上傳提交地址

//,imagePath:URL + "php/" //圖片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置

,imagePath:"http://test.mathandcs.com/"

,imageFieldName:"upfile" //圖片數(shù)據(jù)的key,若此處修改，需要在后臺(tái)對應(yīng)文件修改對應(yīng)參數(shù)

這里的imageURL是圖片上傳所調(diào)用的php文件的地址，而imagePath則是為新上傳的圖片生成的圖片地址的host部分；

再打開ueditor/php/下的imageUp.php文件，有配置如下：

$config = array( 
"savePath" => "/var/www/store/upload/" , //存儲(chǔ)文件夾 
"maxSize" => 1000 , //允許的文件最大尺寸，單位KB 
"allowFiles" => array( ".gif" , ".png" , ".png" , ".jpeg" , ".bmp" ) //允許的文件格式 
); 
//上傳文件目錄 
//$Path = "upload/"; 
$Path = "/var/www/store/upload/"; 

這里需要把上傳文件到服務(wù)器的目的地址（上傳文件保存文件）savePath修改成你指定的文件地址。

由于相對路徑和絕對路徑的問題，生成的地址有可能是錯(cuò)的，這時(shí)就要hack一下生成圖片URL的JS文件：

ueditor/dialogs/image/image.js 中修改：

/**

* @author wusuopubupt

* @date 2013-10-24

* @return url modified

* */

var reg = /\/var\/www\/test\/upload\//;

url = url.replace(reg,"");

var $img = $("<img src='" + editor.options.imagePath + url + "' class='edui-image-pic' />"),

$item = $("<div class='edui-image-item edui-image-upload-item'><div class='edui-image-close'></div></div>").append($img);

這里的正則的規(guī)則要根據(jù)具體情況來定！

至此，Ueditor便在我的環(huán)境中配置成功了。