margorpi / quickimageuploader Goto Github PK

CKEDITOR.appendTo('editor', {
  ... //Your other settings here
  quickImageUploadURL : 'https://example.com/your-image-upload-url.php', //see "sample-image-upload-url.php"
  quickImageUploadGetParams : function(){
      //this function is optional. return a param list which will be POST to the quickImageUploadURL above.
	return {"param1" : 123, "param2" : 456};
	},
  isQuickImageUploaderBusy : function(){
      //this function is optional. 
      //return TRUE if you want to do nothing when user clicks the upload button, eg. an image is uploading.
	return this_is_your_own_function_ok_to_upload_image();
	},
  onQuickImageUploadStart : function(editor){
      //this function is optional, but usually it shouldn't be absent
      //The user will see a placeholder here first and you can add some ani effect...
      var html = '<div contenteditable="false" class="the_only_uploading_img_div do_your_own_css_magic_here">do your own html/js magic here</div><p><br /></p>';
      editor.insertElement(CKEDITOR.dom.element.createFromHtml(html));
  },
  onQuickImageUploading : function(loaded, total){
      //this function is optional.
      console.log('Todal:' + total + ' Loaded:' + loaded);
      your_own_function_to_display_a_waiting_progress_bar(loaded, total);
  },
  onQuickImageUploaded : function(data){
      //this function is optional, but usually it shouldn't be absent
      var d = $.parseJSON(data);
	if(d.url == null){
		var err = 'Invalid Image File';
		//you can define your own err code in your-image-upload-url.php
		switch(d.err){
			case 1:
			    err = 'The uploaded image format is not of acceptible format! Please upload jpeg, png or gif format';
			break;
			case 2:
			    err = 'The image you uploaded in gif format cannot exceed 2M.'; //You can change this value in your-image-upload-url.php file
			break;
			case 3:
				err = 'Unable to save the image you uploaded.';
			break;
		}
		alert(err);
		return null;
	}
      $('div.the_only_uploading_img_div').html('<img src="' + d.url + '" width="' + d.w + '" height="' + d.h + '" />').removeClass('the_only_uploading_img_div');//Do your own html/js tricks here.
      //always return null here, because you just inserted the image by yourself. Or you can return a HTML block, the plugin will insert it to the editor  
      return null;
  }
});