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

將原有的serverUrl注釋掉，然後在下面新增一行，內容為

, serverUrl: "http://www.bbb.com/ueditor/php/controller.php"

如圖：

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

修改文件訪問路徑前綴，具體為，將該文件中所有以UrlPrefix結尾的參數，修改為http://www.bbb.com

如圖：

修改3：增加回調函數

在http://www.aaa.com根目錄下，新建一個ue_upload_callback.php文件，內容如下：

$ueUploadCallback = new UeUploadCallback();
call_user_func_array(array($ueUploadCallback,'index'),array());

class UeUploadCallback {
    public function index() {
        die($_REQUEST['ueResult']);
    }
}

圖片服務器端修改

服務器端，只需要修改/ueditor/php/controller.php一個文件即可。主要就是增加一個callbackUrl參數，用於跨域時的數據回調，同時增加跨域權限設置。

1. 增加跨域權限設置

header('Access-Control-Allow-Origin:http://www.aaa.com');
header('Access-Control-Allow-Methods:POST,GET,OPTIONS');
header('Access-Control-Allow-Credentials:true');
$requestMethod = $_SERVER['REQUEST_METHOD'];
if ($requestMethod == 'OPTIONS') {
    header('Content-Type:text/plain charset=UTF-8');
    header('Content-Length: 0',true);
    header('status: 204');
    header('HTTP/1.0 204 No Content');
} else {
    header('Access-Control-Allow-Headers:Origin,X-Requested-With,X_Requested_With,Content-Type,Accept');
}

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/ue_upload_callback.php'
        });
    });
</script>