ueditor title=正在上传..._百度ueditor富文本插件多图片上传顺序混乱问题

b302c85df6ce0a9497d3d218d6e32c55.png

问题:上传后,图片的顺序和预期的不一致,需要修改ueditor的源码。

百度富文本编辑器是按照图片先上传完成先显示来排序,显然跟我们选择好排序不一致(因为图片有大小)。

b9052089a73da47b76a145961283174d.png

解决:显示以及上传窗口涉及到编辑器的两个文件image.js和attachment.js这两个JS文件。

一、找到editor/dialogs/attachment/attachment.js文件,将_this.fileList.push(json);修改为_this.fileList[$file.index()] = json;

uploader.on('uploadSuccess', function (file, ret) {
    var $file = $('#' + file.id);
    try {
        var responseText = (ret._raw || ret),
            json = utils.str2json(responseText);
        if (json.state == 'SUCCESS') {
            // _this.imageList.push(json);  //按图片大小,从小到大排序
            _this.imageList[$file.index()] = json;    //按选择好的文件顺序排序
            $file.append('<span class="success"></span>');
        } else {
            $file.find('.error').text(json.state).show();
        }
    } catch (e) {
        $file.find('.error').text(lang.errorServerUpload).show();
    }
});

考虑上传失败的情况,加上一个判断,避免在上传失败后,数组中出现undefined项,需要修改getInsertList方法。(还是在attachment.js文件中)

getInsertList: function () {
    var i, link, data, list = [],
        prefix = editor.getOpt('fileUrlPrefix');
    for (i = 0; i < this.fileList.length; i++) {
        data = this.fileList[i];

 /**
         * 源自于对line:506行的修改,避免部分图片上传失败,或者选择的图片不符合规范
         * 不能上传造成imageList数组中出现undefined项。
         */
 if(data == undefined){
            continue
        }

        link = data.url;
        list.push({
            title: data.original || link.substr(link.lastIndexOf('/') + 1),
            url: prefix + link
        });
    }
    return list;
}

二、找到editor/dialogs/image/image.js文件,这个js文件的修改跟attachment.js修改差不多。将_this.imageList.push(json);修改为_this.imageList[$file.index()] = json;

uploader.on('uploadSuccess', function (file, ret) {
    var $file = $('#' + file.id);
    try {
        var responseText = (ret._raw || ret),
            json = utils.str2json(responseText);
        if (json.state == 'SUCCESS') {
            // _this.imageList.push(json);  //按图片大小,从小到大排序
            _this.imageList[$file.index()] = json;    //按选择好的文件顺序排序
            $file.append('<span class="success"></span>');
        } else {
            $file.find('.error').text(json.state).show();
        }
    } catch (e) {
        $file.find('.error').text(lang.errorServerUpload).show();
    }
});

同样考虑上传失败的情况,加上一个判断,避免在上传失败后,数组中出现undefined项,需要修改getInsertList方法。(还是在image.js文件中)

getInsertList: function () {
    var i, data, list = [],
        align = getAlign(),
        prefix = editor.getOpt('imageUrlPrefix');
    for (i = 0; i < this.imageList.length; i++) {
        data = this.imageList[i];
 /**
         * 源自于对line:721行的修改,避免部分图片上传失败,或者选择的图片不符合规范
         * 不能上传造成imageList数组中出现undefined项。
         */
 if(data == undefined){
            continue
        }
        list.push({
            src: prefix + data.url,
            _src: prefix + data.url,
            title: data.title,
            alt: data.original,
            floatStyle: align
        });
    }
    return list;
}

(备注)方法实现有效,不过测试的过程需要注意清除项目缓存或者浏览器缓存。(毕竟Js一些奇葩bug或者问题就是缓存惹的),笔者使用过程中就遇到过,修改代码保存后没有任何效果的情况。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值