/** nicImage */ /* START CONFIG */ var nicImageOptions = { buttons : { 'image' : {name : __('Add Image'), type : 'nicImageButton', tags : ['IMG']} } }; /* END CONFIG */ var nicImageButton = nicEditorAdvancedButton.extend({ addPane : function() { this.im = this.ne.selectedInstance.selElm().parentTag('IMG'); this.addForm({ '' : {type : 'title', txt : __('Add/Edit Image')}, 'src' : {type : 'text', txt : __('URL'), 'value' : 'http://', style : {width: '150px'}}, 'alt' : {type : 'text', txt : __('Alt Text'), style : {width: '100px'}}, 'align' : {type : 'select', txt : __('Align'), options : {none : __('Inline'),'left' : __('Left'), 'right' : __('Right')}} },this.im); }, submit : function(e) { var src = this.inputs['src'].value; if(src == "" || src == "http://") { alert(__("You must enter a Image URL to insert")); return false; } this.removePane(); if(!this.im) { var tmp = 'javascript:nicImTemp();'; this.ne.nicCommand("insertImage",tmp); this.im = this.findElm('IMG','src',tmp); } if(this.im) { this.im.setAttributes({ src : this.inputs['src'].value, alt : this.inputs['alt'].value, title : this.inputs['alt'].value, align : this.inputs['align'].value }); } } }); nicEditors.registerPlugin(nicPlugin,nicImageOptions); /** nicUpload */ /* START CONFIG */ var nicUploadOptions = { buttons : { 'upload' : {name : __('Upload Image'), type : 'nicUploadButton'} } }; /* END CONFIG */ var nicUploadButton = nicEditorAdvancedButton.extend({ nicURI : 'http://api.imgur.com/2/upload.json', errorText : __('Failed to upload image'), addPane : function() { if(typeof window.FormData === "undefined") { return this.onError(__("Image uploads are not supported in this browser, use Chrome, Firefox, or Safari instead.")); } this.im = this.ne.selectedInstance.selElm().parentTag('IMG'); var container = new bkElement('div') .setStyle({ padding: '10px' }) .appendTo(this.pane.pane); new bkElement('div') .setStyle({ fontSize: '14px', fontWeight : 'bold', paddingBottom: '5px' }) .setContent(__('Insert an Image')) .appendTo(container); this.fileInput = new bkElement('input') .setAttributes({ 'type' : 'file' }) .appendTo(container); this.progress = new bkElement('progress') .setStyle({ width : '100%', display: 'none' }) .setAttributes('max', 100) .appendTo(container); this.fileInput.onchange = this.uploadFile.closure(this); }, onError : function(msg) { this.removePane(); alert(msg || __("Failed to upload image")); }, uploadFile : function() { var file = this.fileInput.files[0]; if (!file || !file.type.match(/image.*/)) { this.onError(__("Only image files can be uploaded")); return; } this.fileInput.setStyle({ display: 'none' }); this.setProgress(0); var fd = new FormData(); // https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/ fd.append("image", file); fd.append("key", "b7ea18a4ecbda8e92203fa4968d10660"); var xhr = new XMLHttpRequest(); xhr.open("POST", this.ne.options.uploadURI || this.nicURI); xhr.onload = function() { try { var res = JSON.parse(xhr.responseText); } catch(e) { return this.onError(); } this.onUploaded(res.upload); }.closure(this); xhr.onerror = this.onError.closure(this); xhr.upload.onprogress = function(e) { this.setProgress(e.loaded / e.total); }.closure(this); xhr.send(fd); }, setProgress : function(percent) { this.progress.setStyle({ display: 'block' }); if(percent < .98) { this.progress.value = percent; } else { this.progress.removeAttribute('value'); } }, onUploaded : function(options) { this.removePane(); var src = options.links.original; if(!this.im) { this.ne.selectedInstance.restoreRng(); var tmp = 'javascript:nicImTemp();'; this.ne.nicCommand("insertImage", src); this.im = this.findElm('IMG','src', src); } var w = parseInt(this.ne.selectedInstance.elm.getStyle('width')); if(this.im) { this.im.setAttributes({ src : src, width : (w && options.image.width) ? Math.min(w, options.image.width) : '' }); } } }); nicEditors.registerPlugin(nicPlugin,nicUploadOptions);