ueditor 上传图片跨域问题

张映 发表于 2018-07-06

分类目录: php

标签:,

UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量、可定制、用户体验优秀等特点。开源基于BSD协议,所有源代码在协议允许范围内可自由修改和使用。百度UEditor的推出,可以帮助不少网站开发者在开发富文本编辑器所遇到的难题,节约开发者因开发富文本编辑器所需要的大量时间,有效降低了企业的开发成本。

一,ueditor自身是不支持跨域的,但是做一下简单的修改就可以实现

客户端:a.com

服务端:b.com

二,在客户端a.com,修改

1,修改ueditor.config.js

// , serverUrl: URL + "php/controller.php"
 , serverUrl: "http://b.com/php/controller.php"

2,修改ueditor.all.js或者ueditor.min.js

搜索edui_form_,在form表单里面加上以下

wrapper.innerHTML = '<form id="edui_form_' + timestrap + '" target="edui_iframe_' + timestrap +
'" method="POST" enctype="multipart/form-data" action="' + me.getOpt('serverUrl') + '" ' +
'style="' + btnStyle + '"><input type="hidden" name="issimpleupload" value="true" />' +
'<input id="edui_input_' + timestrap + '" type="file" accept="image/*" name="' + me.options.imageFieldName + '" ' +
'style="' + btnStyle + '">' +
'</form>' +

加上<input type="hidden" name="issimpleupload" value="true" />

二,在服务端b.com,修改controller.php

1,  顶部加上跨域

header("Access-Control-Allow-Origin:*");
header("Access-Control-Allow-Headers:X-Requested-With,X_Requested_With");

2,修改以下代码 

if (isset($_GET["callback"])) {
 if (preg_match("/^[\w_]+$/", $_GET["callback"])) {
 echo htmlspecialchars($_GET["callback"]) . '(' . $result . ')';
 } else {
 echo json_encode(array(
 'state'=> 'callback参数不合法'
 ));
 }
} else {
 if(!empty($_REQUEST['issimpleupload'])){
 header("location:http://a.com/result.php?result=".urlencode($result));   //这步比较难以理解
 exit;
 }
}

在这里为什么要跳转回去呢?这是因为,ueditor是通过iframe,进行远程上传的,如果不跳转而是直接输出内容,这样ueditor获取不到iframe中的内容,因为跨域。所以要跳转回去,并把值回去,这样子ueditor就能获取到了。

三,添加一个result.php

<?php

echo $_REQUEST['result'];

?>

只要能输出值就行了。

 



转载请注明
作者:海底苍鹰
地址:http://blog.51yip.com/php/1937.html/comment-page-1

1 条评论

  1. po88 留言

    可以,简单粗暴