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