如何在 CKEditor 中显示上传进度？答案

【问题标题】：How to show uploading progress in CKEditor?如何在 CKEditor 中显示上传进度？
【发布时间】：2017-06-24 10:42:43
【问题描述】：

我正在添加一个插件，允许用户将视频上传并显示到 CKEditor。文件可能很大，所以我想显示上传进度。

目前我使用默认的 FileBrowser API 来显示上传按钮，但文档没有提到显示进度。

我怎样才能做到这一点？还是我需要自己写上传插件？

【问题讨论】：

标签： javascript upload ckeditor progress

【解决方案1】：

您可以触发事件发射器来检查是否正在上传

使用 nodejs 进行 s3 上传的示例代码

function s3uploads(filePath, callback){

var localFile = filePath;

    var onlyFileName = localFile.split("/");
    var fname = (onlyFileName[onlyFileName.length - 1]);

    var params = {
        localFile: localFile,

        s3Params: {
            Bucket: "ss3bucket",
            Key: "folder-name/" + fname,
            ACL: 'public-read',
            CacheControl: 'max-age=31536000',
            Expires: new Date || 'Wed Dec 31 2099 16:00:00 GMT-0800 (PST)'
            || 123456789
        }
    };

    var uploader = client.uploadFile(params);
            uploader.on('error', function (err) {
                console.error("unable to upload:", err.stack);
                return callback(err,null)
            });
            uploader.on('progress', function () {
                console.log("progress", uploader.progressMd5Amount,
                    uploader.progressAmount, uploader.progressTotal);
                var percentCal = ((parseInt(uploader.progressAmount) * 100) / parseInt(uploader.progressTotal)).toFixed(2);
                var percent = percentCal.toString();
                return callback(null,{type : 'progress', percent: percent, url : null});
            });
            uploader.on('end', function () {
                console.log("done uploading");

                return callback(null,{type : 'end', percent: '100', url : 'https://s3.us-east-2.amazonaws.com/s3bucket/folder-name/' + fname});

            });
}

在你想调用这个函数的代码块中您可以在进度状态处于活动状态并且达到结束状态时使用 response.write() 然后您可以传递 res.end()

s3uploads(fileUrl, function (err, uploadResult) {
                if(err){
                    res.send("error");
                }

                if(uploadResult.type === 'progress'){
                    var html =  "<p>Please wait its uploading to server </p> <p></p>" ;

                    res.write(html);

                } else {
                    fileUrl = uploadResult.url;

                    res.write("<script type='text/javascript'>\
 (function(){var d=document.domain;while (true){try{var A=window.parent.document.domain;break;}catch(e) {};d=d.replace(/.*?(?:\.|$)/,'');if (d.length==0) break;try{document.domain=d;}catch (e){break;}}})();\
 window.parent.CKEDITOR.tools.callFunction('" + CKEcallback + "','" + fileUrl + "', '" + msg + "');\
 </script>");
                    res.end();
                }

            });

【讨论】：