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

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

作者: 你笑时很美丶 | 来源:发表于2020-03-30 14:23 被阅读0次

    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;
            }
    

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/edcvuhtx.html