Khi sử dụng trình soạn thảo văn bản UEditor, vấn đề gặp phải là thứ tự hình ảnh sau khi tải lên không đúng với thứ tự đã chọn ban đầu.

UEditor hiển thị hình ảnh dựa trên thứ tự tải lên thành công, điều này không nhất quán với thứ tự lựa chọn ban đầu của người dùng (do kích thước khác nhau giữa các hình ảnh).

Giải Pháp: Điều chỉnh hai tập tin JavaScript liên quan đến cửa sổ hiển thị và tải lên là image.js và attachment.js.

Bước 1: Chỉnh sửa tập tin editor/dialogs/attachment/attachment.js

Thay đổi dòng mã _this.fileList.push(json); thành _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.fileList[$file.index()] = json; // Sắp xếp theo thứ tự lựa chọn
            $file.append('<span class="success"></span>');
        } else {
            $file.find('.error').text(json.state).show();
        }
    } catch (e) {
        $file.find('.error').text(lang.errorServerUpload).show();
    }
});

Để xử lý trường hợp tải lên thất bại, thêm một kiểm tra để tránh việc xuất hiện phần tử undefined trong mảng fileList. Điều chỉnh phương thức getInsertList như sau:

getInsertList: function () {
    var i, link, data, list = [],
        prefix = editor.getOpt('fileUrlPrefix');
    for (i = 0; i < this.fileList.length; i++) {
        data = this.fileList[i];
        if (data == undefined) {
            continue;
        }
        link = data.url;
        list.push({
            title: data.original || link.substr(link.lastIndexOf('/') + 1),
            url: prefix + link
        });
    }
    return list;
}

Bước 2: Chỉnh sửa tập tin editor/dialogs/image/image.js

Tương tự như bước 1, thay đổi dòng mã _this.imageList.push(json); thành _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[$file.index()] = json; // Sắp xếp theo thứ tự lựa chọn
            $file.append('<span class="success"></span>');
        } else {
            $file.find('.error').text(json.state).show();
        }
    } catch (e) {
        $file.find('.error').text(lang.errorServerUpload).show();
    }
});

Cũng cần thêm kiểm tra tương tự để xử lý trường hợp tải lên thất bại trong phương thức getInsertList:

getInsertList: function () {
    var i, data, list = [],
        align = getAlign(),
        prefix = editor.getOpt('imageUrlPrefix');
    for (i = 0; i < this.imageList.length; i++) {
        data = this.imageList[i];
        if (data == undefined) {
            continue;
        }
        list.push({
            src: prefix + data.url,
            _src: prefix + data.url,
            title: data.title,
            alt: data.original,
            floatStyle: align
        });
    }
    return list;
}

Lưu ý: Sau khi thực hiện các thay đổi trên, hãy xóa bộ nhớ đệm của trình duyệt hoặc dự án để đảm bảo các thay đổi được áp dụng.