UEditor图片跨域上传解决方案

预设环境

UEditor版本：1.4

客户端地址：http://www.aaa.com

图片服务器地址：http://www.bbb.com

图片服务器端UEditor的部署URL：http://www.bbb.com/ueditor/

客户端和图片服务器各部署一套UEditor环境

客户端修改

修改1：/ueditor/ueditor.config.js

将原有的URL注释掉，然后在下面新增一行，内容为

var URL = "http://www.bbb.com/ueditor/";

如图：

修改2：/ueditor/php/config.json

修改文件访问路径前缀，具体为，将该文件中所有以UrlPrefix结尾的参数，修改为http://www.bbb.com

如图：

图片服务器端修改

服务器端，只需要修改/ueditor/php/controller.php一个文件即可。主要就是增加一个callbackUrl参数，用于跨域时的数据回调，同时增加跨域权限设置。

1. 增加跨域权限设置

header('Access-Control-Allow-Origin: http://www.aaa.com'); //设置跨域访问

header('Access-Control-Allow-Headers: X-Requested-With,X_Requested_With'); //设置允许的跨域header

2. 增加跨域回调参数

将原有的代码

/* 输出结果 */

if (isset($_GET["callback"])) {

    if (preg_match("/^[\w_]+$/", $_GET["callback"])) {

        echo htmlspecialchars($_GET["callback"]) . '(' . $result . ')';

    } else {

        echo json_encode(array(

            'state'=> 'callback参数不合法'

        ));

    }

} else {

    echo $result;

}

修改为

/* 输出结果 */

if (isset($_GET["callback"])) {

    if (preg_match("/^[\w_]+$/", $_GET["callback"])) {

        echo htmlspecialchars($_GET["callback"]) . '(' . $result . ')';

    } else {

        echo json_encode(array(

            'state'=> 'callback参数不合法'

        ));

    }

} else {

    if ($_REQUEST['callbackUrl']) {

        header("Location:".$_REQUEST['callbackUrl']."?ueResult=".urlencode($result));

    } else {

        echo $result;

    }

}

注意：此处的ueResult参数，客户端将通过该参数，获取UEditor返回的数据。

客户端调用

<script id="container" name="content" type="text/plain"></script>

<script type="text/javascript">

    var ue = UE.getEditor('container');

    ue.ready(function() {

        //绑定自定义的回调URL

        ue.execCommand('serverparam', {

            'callbackUrl': 'http://www.aaa.com/uploadCallback'

        });

    });

</script>

然后在回调中，直接输出UEditor返回的数据就可以了。

public function uploadCallback() {

    die($_REQUEST['ueResult']);

}