(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) { alert(err.data.error) } 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); } 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: '
', onLoad: function(a) { CKEDITOR.document.getById(this.domId).on('click', function() { },this); } }, { type: "html", style: "width:100%;", html:'', onLoad: function(a) { CKEDITOR.document.getById(this.domId).on('click', function() { /*function getObjectURL(file) { var url = null ; if (window.createObjectURL!=undefined) { // basic url = window.createObjectURL(file) ; } else if (window.URL!=undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file) ; } else if (window.webkitURL!=undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file) ; } return url ; };*/ //var imgUrl=getObjectURL(CKEDITOR.document.getById("uploadImg").$.files[0]); var dialog = this.getDialog(); if(dialog._.editor.upload){ dialog._.editor.upload(CKEDITOR.document.getById("uploadImg").$.files[0]); } /*if(imgUrl){ dialog._.editor.uploadImgUrl(imgUrl); console.log(backend.uploadImgUrl); }*/ dialog.hide(); //dialog._.editor.insertHtml('This is some text and then: Click me!
', onLoad: function(a) { CKEDITOR.document.getById(this.domId).on('click', function() { console.log(this.domId); console.log(this); var dialog = this.getDialog(); dialog.hide(); dialog._.editor.insertHtml(this.html); }, this); } }, */ ] }], onOk: function() { //console.log(a); }, onShow: function () { //document.getElementById("uploadimage").setAttribute("src","/image/image.html?v=' +new Date().getSeconds() + '"); } } }) } }); })();