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

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

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

解决：显示以及上传窗口涉及到编辑器的两个文件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或者问题就是缓存惹的），笔者使用过程中就遇到过，修改代码保存后没有任何效果的情况。