百度UEditor編輯器使用教程與使用方法

標籤：

我們在做網站的時候，網站後台系統一般都會用到web編輯器，今天筆者就給大家推薦一款百度UEditor編輯器。關於這款百度UEditor編輯器官網上也有簡單的教程，不過看著比較費勁，今天筆者就跟大家分享一下百度UEditor編輯器使用教程與使用方法，希望對大家有所協助。

第一：百度UEditor編輯器的官方

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

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

：http://ueditor.baidu.com/website/download.html （這裡可選開發版，或MINI版）

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

   當我們進入百度UEditor編輯器官網點擊下載選項後，我們發現一共有兩個版本供我們選擇，一個是UBuilder,一個是開發版，通過下面注釋的紅色小字我們可以瞭解到UBuilder和開發版的區別。一般情況下我們選擇UBuilder版本即可。

 

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

 

   接著就是隱藏功能，語言，服務端版本的選擇，隱藏功能預設的是全選，如非必要還是不要更改為好。語言選項共分為了中文和英文兩種，預設的是只下載中文語言套件，如果你有需要用到英文的話可以把英文包也加上。服務端版本目前提供了三種，分別為PHP，.NET，JSP，選擇完畢後我們就可以點擊下載資源套件了。

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

1、從官網上下載完整源碼包，解壓到任意目錄，解壓後的源碼目錄結構如下所示：

     _examples：編輯器完整版的樣本頁面

    dialogs：彈出對話方塊對應的資源和JS檔案

    themes：樣式圖片和樣式檔案   php/jsp/.net：涉及到伺服器端操作的後台檔案，根據你選擇的不同後台版本，這裡也會不同，這裡我們選擇php

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

    editor_all.js：_src目錄下所有檔案的打包檔案（用於發布版本）

    editor_api.js: API介面設定檔（開發版本）

    editor_all_min.js：editor_all.js檔案的壓縮版，建議在正式部署時才採用

editor_config.js：編輯器的設定檔，建議和編輯器執行個體化頁面置於同一目錄

2、編輯器的執行個體化頁面，匯入編輯器需要的三個入口檔案，範例程式碼如下：

 

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

  <!--使用版--> 

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

 <!--開發版--> 

    <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、然後在編輯器的執行個體化頁面中建立編輯器執行個體及其DOM容器，範例程式碼如下：

 

<textarea name="後台取值的key" id="myEditor">這裡寫你的初始化內容</textarea>  

<script type="text/javascript"> 

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

    editor.render("myEditor"); 

    //1.2.4以後可以使用一下代碼執行個體化編輯器 

    //UE.getEditor(’myEditor’) 

</script> 

4、在editor_config.js中尋找URL變數配置編輯器在你項目中的路徑。

官網樣本：

 

//強烈推薦以這種方式進行絕對路徑配置 

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

我的配置：

 

(function () { 

    /**

     * 編輯器資源檔根路徑。它所表示的含義是：以編輯器執行個體化頁面為當前路徑，指向編輯器資源檔（即dialog等檔案夾）的路徑。

     * 鑒於很多同學在使用編輯器的時候出現的種種路徑問題，此處強烈建議大家使用"相對於網站根目錄的相對路徑"進行配置。

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

     * 如果網站中有多個不在同一層級的頁面需要執行個體化編輯器，且引用了同一UEditor的時候，此處的URL可能不適用於每個頁面的編輯器。

     * 因此，UEditor提供了針對不同頁面的編輯器可單獨配置的根路徑，具體來說，在需要執行個體化編輯器的頁面最頂部寫上如下代碼即可。當然，需要令此處的URL等於對應的配置。

     * 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）開發時,開啟editor_api.js,代碼如下

/**

 * 開發版本的檔案匯入

 */ 

(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>’); 

    } 

})(); 

可以看到，這裡有一項：baseURL，就是JS檔案的路由，這裡要根據ueditor_api.js檔案的實際路徑去配置！

6、檔案上傳問題：

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

//圖片上傳配置區 

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

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

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

       ,imageFieldName:"upfile"                   //圖片資料的key,若此處修改，需要在後台對應檔案修改對應參數 

 

這裡的imageURL是圖片上傳所調用的php檔案的地址，而imagePath則是為新上傳的圖片產生的圖片地址的host部分；

再開啟ueditor/php/下的imageUp.php檔案，有配置如下：

 

$config = array( 

        "savePath" => "/var/www/store/upload/" ,             //隱藏檔夾 

        "maxSize" => 1000 ,                   //允許的檔案最大尺寸，單位KB 

        "allowFiles" => array( ".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp" )  //允許的檔案格式 

    ); 

    //上傳檔案目錄 

    //$Path = "upload/"; 

    $Path = "/var/www/store/upload/"; 

這裡需要把上傳檔案到伺服器的目的地址（上傳檔案儲存檔案）savePath修改成你指定的檔案地址。

由於相對路徑和絕對路徑的問題，產生的地址有可能是錯的，這時就要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); 

這裡的正則的規則要根據具體情況來定！

至此，Ueditor便在我的環境中配置成功了。

百度UEditor編輯器使用教程與使用方法