zuel-itsm-3.0.2/bower_components/ckeditor/plugins/uploadimage/plugin.js

(function() {

    CKEDITOR.plugins.add('uploadimage', {
        requires: ["dialog"],
        init: function(editor) {

            editor.addCommand("uploadimage", new CKEDITOR.dialogCommand("uploadimage"));

            editor.ui.addButton("uploadimage", {
                label: "图片文件上传", //调用dialog时显示的名称  
                command: "uploadimage",
                icon: this.path + "../image2/icons/image.png" //在toolbar中的图标  

            });

            backends = {
                basic: {
                    upload: uploadBasic,
                    uploadImgUrl: "",
                    required: ['uploadUrl'],
                    init: function() {}
                }
            };

            var checkRequirement = function(condition, message) {
                if (!condition)
                    throw Error("Assert failed" + (typeof message !== "undefined" ? ": " + message : ""));
            };

            function validateConfig() {
                var errorTemplate = 'uploadimageUpload Error: ->';
                checkRequirement(
                    editor.config.hasOwnProperty('uploadimageConfig'),
                    errorTemplate + "Missing required uploadimageConfig in CKEDITOR.config.js"
                );

                var backend = backends[editor.config.uploadimageConfig.backend];

                var suppliedKeys = Object.keys(editor.config.uploadimageConfig.settings);
                var requiredKeys = backend.required;

                var missing = requiredKeys.filter(function(key) {
                    return suppliedKeys.indexOf(key) < 0
                });

                if (missing.length > 0) {
                    throw 'Invalid Config: Missing required keys: ' + missing.join(', ')
                }
            }

            validateConfig();

            var backend = backends[editor.config.uploadimageConfig.backend];
            backend.init();

            function doNothing(e) {}

            function orPopError(err) {}

            function dropHandler(e) {
                e.preventDefault();
                var file = e.dataTransfer.files[0];
                backend.upload(file).then(insertImage, orPopError);
                alert("dohand")
            }

            editor.upload = up;

            function up(file) {
                backend.upload(file).then(insertImage, orPopError);
            }

            editor.apiUri = editor.config.uploadimageConfig.settings.downloadUrl;

            function insertImage(href) {
                var elem = editor.document.createElement('img', {
                    attributes: {
                        src: editor.apiUri + href
                    }
                });
                editor.insertElement(elem);
                console.log(CKEDITOR.document.getById("uploadImg").$.files)
            }

            editor.background = function(objectId) {
                var obj = document.getElementById('objectId');
                obj.style.backgroundColor = "red";
            }

            function addHeaders(xhttp, headers) {
                for (var key in headers) {
                    if (headers.hasOwnProperty(key)) {
                        xhttp.setRequestHeader(key, headers[key]);
                    }
                }
            }

            function post(url, data, headers) {
                return new Promise(function(resolve, reject) {
                    var xhttp = new XMLHttpRequest();
                    var formData = new FormData();
                    formData.append("file", data);
                    formData.append("fileName", data.name);
                    formData.append("type", "images");
                    xhttp.open('POST', url);
                    addHeaders(xhttp, headers);
                    xhttp.onreadystatechange = function() {
                        if (xhttp.readyState === 4) {
                            if (xhttp.status === 200) {
                                var requireData = JSON.parse(xhttp.responseText);
                                resolve('file'+requireData.data.relativeFilePath);
                            } else {
                                reject(JSON.parse(xhttp.responseText));
                            }
                        }
                    };

                    xhttp.send(formData);
                });
            }

            function addImg(file,editor){
                let  reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function() {
                    let result = this.result;   //result为data url的形式
                    // editor.$.activeElement.contentDocument.body.innerHTML+=("<img style='width:400px;' src="+result+" ><input style='display:inline-block;width:0' id='dingdandan'>")
                    var elem = editor.document.createElement('img', {
                        attributes: {
                            src: result
                        }
                    });
                    editor.insertElement(elem);
                }
            }
            editor.addImg = addImg;
            function uploadBasic(file) {
                var settings = editor.config.uploadimageConfig.settings;
                return post(settings.uploadUrl, file, settings.headers);
            }

            // editor.on('paste', function( evt ) {
            //     //if ( !checkImage( evt.data.dataValue ) )
            //     console.log('1231');
            //     evt.cancel();
            // });

            


            CKEDITOR.on('instanceReady', function() {
                var iframeBase = document.querySelector('iframe').contentDocument.querySelector('html');
                var iframeBody = iframeBase.querySelector('body');

                iframeBody.ondragover = doNothing;
                iframeBody.ondrop = dropHandler;

                paddingToCenterBody = ((iframeBase.offsetWidth - iframeBody.offsetWidth) / 2) + 'px';
                iframeBase.style.height = '100%';
                iframeBase.style.width = '100%';
                iframeBase.style.overflowX = 'hidden';

                iframeBody.style.height = '100%';
                iframeBody.style.margin = '0';
                iframeBody.style.paddingLeft = paddingToCenterBody;
                iframeBody.style.paddingRight = paddingToCenterBody;
            });


            CKEDITOR.dialog.add("uploadimage",
                function(a) {
                    return {
                        title: "图片上传",
                        minWidth: "660px",
                        minHeight: "400px",
                        contents: [{
                            id: "tab1",
                            label: "",
                            title: "图片上传",
                            expand: true,
                            width: "420px",
                            height: "",
                            padding: 0,
                            elements: [{
                                    type: "html",
                                    style: "width:100%;",
                                    html: '<div><input type="file" class="uploadImgfwb" id="uploadImg" placeholder="请选择上传的图片" style="margin:10px 0px;"/></div>',

                                    onLoad: function(a) {
                                        // CKEDITOR.document.getById("uploadImg").on('change', function() {
                                        //     var fileType = this.$.files[0].type;
                                        //     var fileTypeBoolean = (fileType == "image/jpeg" || fileType == "image/jpg" || fileType == "image/png" || fileType == "image/bmp");
                                        //     if (this.$.files.length == 1 && fileTypeBoolean) {
                                        //         var imgBtn = document.getElementById('uploadImgBtn');
                                        //         imgBtn.style.backgroundColor = "dodgerblue";
                                        //     } else {
                                        //         console.log(false);
                                        //     }
                                        // });
                                        $($(".uploadImgfwb")[$(".uploadImgfwb").length-1]).on('change', function() {
                                            var fileType = this.files[0].type;
                                            var fileTypeBoolean = (fileType == "image/jpeg" || fileType == "image/jpg" || fileType == "image/png" || fileType == "image/bmp");
                                            if (this.files.length == 1 && fileTypeBoolean) {
                                                $($('.uploadImgfwbBtn')[$(".uploadImgfwbBtn").length-1])[0].style.backgroundColor = "dodgerblue";
                                            } else {
                                                console.log(false);
                                            }
                                        });
                                    }
                                },
                                {
                                    type: "html",
                                    style: "width:100%;",
                                    html: '<div><button class="uploadImgfwbBtn" id="uploadImgBtn" style="border: 1px solid black;margin: 2px; padding: 2px;border-radius: 1px;background:#d6d6d8;margin:10px 0px;width:60px;text-align: center;">上传</button></div>',
                                    onLoad: function(a) {
                                        console.log(CKEDITOR.document.getById(this.domId));
                                        // CKEDITOR.document.getById(this.domId).on('click', function() {
                                        //      var fileType = CKEDITOR.document.getById("uploadImg").$.files[0].type;
                                        //      var filesLength = CKEDITOR.document.getById("uploadImg").$.files.length;
                                        //     var fileTypeBoolean = (fileType == "image/jpeg" || fileType == "image/jpg" || fileType == "image/png" || fileType == "image/bmp");
                                        //     var dialog = this.getDialog();
                                        //     if (filesLength == 1 && fileTypeBoolean) {
                                        //         dialog._.editor.upload(CKEDITOR.document.getById("uploadImg").$.files[0]);
                                        //         // dialog._.editor.addImg(CKEDITOR.document.getById("uploadImg").$.files[0]);
                                        //         var imgBtn = document.getElementById('uploadImgBtn');
                                        //         imgBtn.style.backgroundColor = "#d6d6d8";
                                        //         dialog.hide();
                                        //     }
                                        // }, this);
                                        CKEDITOR.document.getById(this.domId).on('click', function() {
                                            var fileType = $($(".uploadImgfwb")[$(".uploadImgfwb").length-1])[0].files[0].type;
                                            var filesLength = $($(".uploadImgfwb")[$(".uploadImgfwb").length-1])[0].files.length;
                                            var fileTypeBoolean = (fileType == "image/jpeg" || fileType == "image/jpg" || fileType == "image/png" || fileType == "image/bmp");
                                            var dialog = this.getDialog();
                                            if (filesLength == 1 && fileTypeBoolean) {
                                                dialog._.editor.upload($($(".uploadImgfwb")[$(".uploadImgfwb").length-1])[0].files[0]);
                                                // dialog._.editor.addImg(CKEDITOR.document.getById("uploadImg").$.files[0]);
                                                var imgBtn = document.getElementById('uploadImgBtn');
                                                imgBtn.style.backgroundColor = "#d6d6d8";
                                                dialog.hide();
                                            }
                                        }, this);

                                    }
                                },
                            ]
                        }],

                        onOk: function() {},
                        onShow: function() {}
                    }
                })

        }
    });
})();