百度富文本编辑器UMeditor,上传图片出现跨域问题

JSP版本下载地址:http://ueditor.baidu.com/website/download.html#mini

使用方法:

1.修改umeditor.config.js,133行

修改umeditor.config.js,133行

2.引入js、css

<link href="../js/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="../js/umeditor/umeditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="../js/umeditor/umeditor.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../js/umeditor/lang/zh-cn/zh-cn.js"></script>

//初始化富文本content对应div的id
var um = UM.getEditor('content');
//获取文本内容
um.getContent();
//写入
um.setContent('test');

3.后台上传接口:


image.png

image.png
出现问题:
  • 图片已经上传却出现如下问题:


    问题1

    查看image.js中submit方法源码发现umeditor用的是iframe,所以会出现跨域问题:

  • 将submit源码更改为:
submit: function (callback) {
            var me = this,
                input = $( '<input style="filter: alpha(opacity=0);" class="edui-image-file" type="file" hidefocus="" name="upfile" accept="image/gif,image/jpeg,image/png,image/jpg,image/bmp">'),
                input = input[0];

            $(me.dialog).delegate( ".edui-image-file", "change", function ( e ) {
                if ( !this.parentNode ) {
                    return;
                }
                var xhr = new XMLHttpRequest();
                xhr.open("post", me.editor.getOpt('imageUrl') + "?type=ajax", true);
                //xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
                var fd = new FormData();
                fd.append(me.editor.getOpt('imageFieldName'), event.target.files[0]);
                xhr.send(fd);
                xhr.addEventListener('load', function (e) {
                    var r = e.target.response, json;
                    me.uploadComplete(r);
                    $(this).unbind('load');
                    $(this).remove();                   
                });
                Upload.updateInput( input );
                me.toggleMask("Loading....");                
                callback && callback();
            });
            return me;
        }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容