CKEditor图片上传跨域问题

在使用CKEditor上传图片时，如果要在本地起应用，图片上传至远程服务器，就有可能产生跨域问题。会有如下报错信息：

ckeditor Blocked a frame with origin from accessing a cross-origin frame.

如果要解决这个问题，就需要在上传图片之后，利用本地应用做一个重定向。下面看一下Demo：

config.js

首先修改CKEditor的config.js的内容，如下所示：

CKEDITOR.editorConfig = function( config ) {
	config.filebrowserUploadUrl="http://www.usoppu.cn/upload/file?backUrl=/getimage.html";
};

从上面结果可以看出来，除了有跨域的URL之外，还有一个backUrl。这个URL并不是全路径，完整的重定向URL需要在上传图片的接口中拼装。当CKEditor请求图片上传接口时，会拼接如下参数，如下所示：

http://www.usoppu.cn/upload/file?backUrl=/getimage.html&CKEditor=content&CKEditorFuncNum=1&langCode=zh-cn

上传接口返回重定向

图片上传接口的处理方式如下（这里就不介绍图片上传的代码了，下面的Demo是Lua代码实现）：

local url = "http://www.usoppu.cn/images/" .. realFileName -- 图片全路径
local callback = args['CKEditorFuncNum'] -- CKEditor回调函数名
local backUrl = ngx.req.get_headers()['Origin'] .. args['backUrl'] -- 拼接重定向URL，header中的Origin可以获取应用的hostname信息
ngx.redirect(backUrl .. '?ImageUrl=' .. url .. '&Message=' .. '&CKEditorFuncNum=' .. callback)

本地应用提供重定向接口

在应用里面需要提供/getimage.html接口，然后返回如下报文给浏览器：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title></title>
</head>
<body>
<script>
    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);  //获取url中"?"符后的字符串并正则匹配
        var context = "";
        if (r != null)
            context = r[2];
        reg = null;
        r = null;
        return context == null || context == "" || context == "undefined" ? "" : context;
    }
    window.parent.CKEDITOR.tools.callFunction(GetQueryString("CKEditorFuncNum"),GetQueryString("ImageUrl"),GetQueryString("Message"));
</script>
</body>
</html>

这样就可以解决跨域问题了。

相关推荐