Skip to content

Instantly share code, notes, and snippets.

@tablatronix
Last active June 17, 2017 15:09
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tablatronix/faea199d3abacf578d68495f1e02f82d to your computer and use it in GitHub Desktop.
Save tablatronix/faea199d3abacf578d68495f1e02f82d to your computer and use it in GitHub Desktop.
getsimple ckeditor upload handler
// add to config.js editorconfig section. you can add ?path= query to this to use a subfolder
config.imageUploadUrl = "../admin/upload.php"
// add to config.js
CKEDITOR.on( 'instanceReady', function( ev ) {
// code for fileupload and response
ev.editor.on( 'fileUploadRequest', function( evt ) {
var fileLoader = evt.data.fileLoader,
formData = new FormData(),
xhr = fileLoader.xhr;
xhr.open( 'POST', fileLoader.uploadUrl, true );
formData.append( 'file[]', fileLoader.file, fileLoader.fileName );
fileLoader.xhr.send( formData );
// Prevent default behavior.
evt.cancel();
}, null, null, 4 ); // Listener with priority 4 will be executed before priority 5.
ev.editor.on( 'fileUploadResponse', function( evt ) {
// Prevent the default response handler.
evt.stop();
// Get XHR and response.
var data = evt.data,
xhr = data.fileLoader.xhr,
response = xhr.responseText;
if ($(response).find('div.updated').html()) {
resphtml = $(response).find('div.updated').html();
url = $("a",resphtml).attr("href");
data.url = url;
$('div.bodycontent').before('<div class="updated"><p>' + resphtml + '</p></div>');
return;
}
if ($(response).find('div.error').html()) {
resphtml = $(response).find('div.error').html();
msg = resphtml;
data.message = msg;
$('div.bodycontent').before('<div class="error"><p>' + resphtml + '</p></div>');
evt.cancel();
return;
}
} );
});
@tablatronix
Copy link
Author

tablatronix commented Oct 2, 2016

http://ckeditor.com/addon/uploadimage
uses
http://ckeditor.com/addon/uploadwidget

Upload Image requires the following dependancies

  • File Tools
  • Notification Aggregator
  • Upload Widget

I suggest you use ckbuilder to add all these automatically, else you have to install them all, and add their entries to the extraplugins

@yangfan0095
Copy link

yangfan0095 commented May 27, 2017

wo qu , the office docs shows that " editor.on( 'fileUploadRequest',) " ,I still think the editor is the CKEDITOR 。

it spend me almost 1 hours to debug .

@yangfan0095
Copy link

I have to say that the English is so import to coding 。

@tablatronix
Copy link
Author

not sure i understand

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment