ueditor 文本編輯器

百度編輯器       壓縮包在文件裏

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

發佈時間：2014-08-23 14:23:34.0　做者：青島作網站

咱們在作網站的時候，網站後臺系統通常都會用到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編輯器的配置方法技巧 一、從官網上下載完整源碼包，解壓到任意目錄，解壓後的源碼目錄結構以下所示：      _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：編輯器的配置文件，建議和編輯器實例化頁面置於同一目錄 二、編輯器的實例化頁面，導入編輯器須要的三個入口文件，示例代碼以下：   <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>   三、而後在編輯器的實例化頁面中建立編輯器實例及其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>  四、在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() {   五、若是用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文件的實際路徑去配置！ 六、文件上傳問題： 打開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便在個人環境中配置成功了。