单独调用ueditor的附件上传功能(二)自定义图片上传页面,图片按名称顺序上传

作者: black_wizard 分类: html,js 发布时间: 2018-06-29 16:02

单独调用ueditor的附件上传功能(一)

需要单独使用ueditor的图片上传功能,同时调整上传的页面样式,但是又不想改变其他已经在使用的ueditor编辑器图片上传页面,通过阅读ueditor.all.js 发现有 iframeUrlMap 变量 ,而在 ueditor.config.js 同样有 iframeUrlMap 的变量配置

在文件夹dialogs下创建一张全新的 imageupload.html ,并将该html地址引入配置即可

    var ue = UE.getEditor('editor1',{
    isShow: false,//隐藏编辑器
        focus: false,
        enableAutoSave: false,
        autoSyncData: false,
        autoFloatEnabled:false,
        wordCount: false,
        sourceEditor: null,
        scaleEnabled:true,
        maximumWords:1,
        toolbars:toolbars,
        iframeUrlMap:{insertimage:'~/dialogs/image/imageupload.html'}
    });


由于批量选择图片的时候,图片列表的排序和上传的顺序并不一致。如果图片有命名规则,同时需要按名称顺序上传。
ueditor 的图片上传使用的是webUploader ,可以通过webUploader 的 sort 方法调整上传顺序

http://fex.baidu.com/webuploader/doc/index.html#WebUploader_Uploader_sort

在image.js里查找 filesQueued ,添加uploader.sort 如下

            uploader.on('filesQueued', function (file) {
                if (!uploader.isInProgress() && (state == 'pedding' || state == 'finish' || state == 'confirm' || state == 'ready')) {
                    setState('ready');
                }
                //对图片按名称调整上传顺序
                uploader.sort(function( a, b ) {
                   if ( a.name < b.name )
                   return -1;
                   if ( a.name > b.name )
                     return 1;
                   return 0;
                });
                updateTotalProgress();
            });

图片会根据名称的顺序上传