itsm-whlg/wechat/app/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 + "templates.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 () {  
                }  
            }  
        })  

	    }
	});      
})();