ueditor使用總結——前端篇.md

首先吐槽下，百度的API太坑，誰讓人家都是大牛呢。

說明：本文所涉獵代碼均依托於seajs，本文所用ueditor版本為1.4.3.3 JSP UTF-8版

###編輯器前端部署： 1、把ueditor引入到項目中，存放路徑：static/common/js/we/piugins/

2、編寫依賴文件(ueditor.js)並實例化編輯器

define(function(require, exports, module) {
    require('./js/ueditor.config.js');
    require('./js/ueditor.all.min.js');
    require('./js/ueditor.parse.min.js');
    require('./themes/default/css/ueditor.min.css');
 
    var init = function(){
        setTimeout(function(){
            editor = UE.getEditor('ueditor');
        },1000)
    }
    return{
        init:init
    }
})

3、配置依賴文件路徑別名，配置文件路徑：static/common/js/we/config.js

'ueditor':'we/plugins/ueditor/1.4.3/ueditor',

4、部署編輯器容器

<textarea id="ueditor" class="ueditor" name="content">內容</textarea>

恭喜你，初次部署成功！

###注意事項 1、改寫靜態資源根路徑 場景描述：ueditor.config.js文件中有一個URL的變量，此變量是指編輯器資源文件的根路徑是以編輯器實例化頁面為當前路徑，指向的是編輯器資源文件（即dialog等文件夾）的路徑； 如果站點中有多個不在同一層級的頁面需要實例化編輯器，且引用了同一UEditor的時候，此處的URL可能不適用於每個頁面的編輯器。

var URL = window.UEDITOR_HOME_URL || getUEBasePath();

解決方案：通過改寫URL的window.UEDITOR_HOME_URL值來指向靜態文件根目錄

//靜態服務器域名
var server_sta = "http://static.uxuexi.com";
//靜態資源根目錄
window.UEDITOR_HOME_URL = server_sta + '/common/js/we/plugins/ueditor/1.4.3/';
var URL = window.UEDITOR_HOME_URL || getUEBasePath();

2、改寫后台請求路徑 場景描述：ueditor.config.js文件中有一個window.UEDITOR_CONFIG全局對象，該對象有一個serverUrl屬性，該屬性值是服務器統一請求接口路徑。根據前后端分離的原則我們需要改變接口路徑

 window.UEDITOR_CONFIG = {
    //為編輯器實例添加一個路徑，這個不能被注釋
    UEDITOR_HOME_URL: URL
    // 服務器統一請求接口路徑
    , serverUrl: server_url
}

解決方案：新建一個變量來設定接口路徑，然后通過變量傳遞來設定替換原有接口路徑,這樣寫可以在封裝或者替換路徑時只專注於修改變量值

//動態服務器域名
var server_dyn = "http://www.xxx.com";
//后台訪問接口，可用於上傳圖片等
var server_url = server_dyn + '/xxx.json';
window.UEDITOR_CONFIG = {
    //為編輯器實例添加一個路徑，這個不能被注釋
    UEDITOR_HOME_URL: URL
    // 服務器統一請求接口路徑
    , serverUrl: server_url
}

3、對接請求規范 1、uploadimage（上傳圖片）

//請求參數:
GET {"action": "uploadimage"}
POST "upfile": File Data

2、config

//請求參數:
GET {"action": "config"}
POST "upfile": File Data

3、uploadvideo（上傳視頻）

//請求參數:
GET {"action": "uploadvideo"}
POST "upfile": File Data

4、uploadfile（上傳文件）

//請求參數:
GET {"action": "uploadfile"}
POST "upfile": File Data