I've been reading through the 'image' plugin but other the part in the dialog where it defines the Upload tab, I can't for the life of me actually figure out how it's creating the two buttons and the iFrame. I've got my PHP upload script working just fine, the images are saving, but having the output of the script go into an unstyled iframe is simply *ugly*, and the user has no indication that the file is even transferring.
Where can I override the default behaviour? CKEditor 4.3 by the way.
The elements in the "Upload"
The elements in the "Upload" tab are handled by the FileBrowser plugin.
If you want a simple solution for your request you can get the SimpleUploads plugin as that's one of its many features related to file uploads. Check the demo and use the Upload tab in the image or link dialogs.
Otherwise, you'll have to keep on digging to find out all the inner workings about dialogs and uploads in CKEditor, and I can assure you that it isn't funny.
Isn't funny? :D It isn't fun!
Isn't funny? :D It isn't fun!
The thing is, with our version of CKeditor, we don't even have the filebrowser plugin... It looks like it got 'compiled' into ckeditor.js... So I wouldn't have been able to replace it anyway.
I did manage to do it with a MASSIVE hack... I added a CKEDITOR event on 'dialogDefinition', and when it came to processing the 'image' dialog, I found the upload button and had jquery bind to the onclick event. I check if the file being uploaded isn't nothing, and then I add an img tag directly to the dialog myself with a spinner...
Then, in upload script whose output is returned into the iframe, I access the parent's jquery instance, and use it to remove the spinner from the parent!
It's such a hack, but I didn't have to hack up Ckeditor or the plugins at least.
It seems to work decently well, despite the fact that my coworkers are going to give me shit.