itsm-whlg/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);
            }

            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(requireData.imageUrl);
                            } else {
                                reject(JSON.parse(xhttp.responseText));
                            }
                        }
                    };

                    xhttp.send(formData);
                });
            }

            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" 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);
                                            }
                                        });
                                    }
                                },
                                {
                                    type: "html",
                                    style: "width:100%;",
                                    html: '<div><button 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) {

                                        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]);
                                                var imgBtn = document.getElementById('uploadImgBtn');
                                                imgBtn.style.backgroundColor = "#d6d6d8";
                                                dialog.hide();
                                            }
                                        }, this);

                                    }
                                },
                            ]
                        }],

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

        }
    });
})();