EasyUpload for CKEditor

Most of the people think that the most commonly used dialogs in CKEditor are too complex for the average user. They show lots of options, and all the info at the same time.

This has always lead to people asking how to change them or how to achieve some feature to simplify that process: I have an image here and I want it there, don't ask me lots of questions and force me to get a degree on HTML in order to understand what's the meaning of all those fields.

So a long time ago I created a simplified version for FCKeditor and now it's the time to show an updated version for CKEditor.

Bear in mind that right now the demo is still half done, I want to show how to use it in different ways so you can get the code to configure it the way that you like just by looking at the demo; and of course, while I polish that part I'll find some adjustments for the plugin.

So you can start testing it in the demo page for Easy Upload for CKEditor. If you have some comments about what you think it's missing you can add them here and I'll try to address them.

What's different from the usual dialogs?

You can check the demo by yourself, but some highlights are:

• If there's no image selected, the user is shown a simple page allowing him to choose the source of the image.
• The extension of the image is validated before uploading it to the server
• While uploading a file from his computer an animation is shown to signal the user that he must wait
• When the image is ready, a simplified dialog is shown

Edit 27th November 2013

I've removed the option to get this plugin and instead I suggest you to use the SimpleUploads and use the CKEditor API to remove elements from the default dialogs.

I'll try to provide a sample page to show how to do that, with the advantage that now instead of a copy of the link or image dialogs you will be using the built-in dialogs and it will be easier to do version upgrades whenever CKEditor changes.

 

Drag and Drop uploads in CKEditor

Recently I was asked about a video that I added to YouTube some time ago: making drag&drop uploads work in CKEditor.
That video was a little test and I used a non-public modification of the image paste plugin that allows to automatically upload images that are pasted in Firefox. The video shows how to use drag and drop from the file system into a CKEditor instance and get that image or file uploaded to the server and inserted into the editor without any extra steps, if you know how to drag a file, adding it to CKEditor can't be any simpler.
The base of that code is XHR2 and FormData to send a File object to the server as well as the dataTransfer interface in the drop event and finally some API to find the correct drop location.
What does all those buzzwords mean?
Just that there are no browser plugins involved, if you use a browser that supports those new APIs then this feature will work: for Firefox, Chrome and Safari you can use the current stable versions, if you use IE then you need the IE 10 preview, and unfortunately Opera supports most of those features in Opera 12, but not the API to get the insertion point, so at the moment it's the only engine that it's left out.

Getting the plugin

The plugin is available in the version 4 page.

Demo

If you want to check how it works, you can use this demo page.

History

2.0 First release including drag&drop
2.1 June 17th, 2012. Added support for pasting in Chrome, correctly process files copied and pasted in Firefox  from the desktop if they aren't png. Support dropping multiple files.

version 3 is explained here

Steps to shutdown windows

Using the current Windows 7 (previous versions is quite similar and everyone has learnt how to do it):

1. Go to the Start or Windows button in the lower left corner.
2. Click it
3. Click the Shutdown button.
4. Done!

Using the Windows 8 Release Preview

1. Uh, there's nothing at the lower left corner?
2. Anyway, move the mouse there, maybe there's a glitch in the graphics as everyone is used to know that there are strange bugs in Windows sometimes
3. Clicking there doesn't do anything.
4. Move to the really lower bottom corner
5. A "Start" popup appers
6. After hunting it a little you're finally able to click it
7. Congratulations, you're now back to the "Windows Metro" screen.
8. At least now you have an icon about your account on the top right
9. Click it.
10. In that dropdown select "Sign out"
11. We're back to the start screen. Now we have the plug&screen icon. Click it.
12. So now we can login again...
13. But theres a Power icon at the bottom right
14. Yeah, click it
15. Now select "Shut down"
16. Finally you got it!!!

Ok, there are some faster ways:

1. Move your mouse to the bottom right corner
2. Yes, I know that there's no hint that you should move your mouse there, but there isn't also any hint now about the bottom left corner.
3. Some white icons appear above. Go to the last one, the one that looks like a gear.
4. Now you see that it's titled Settings. Not promising, but please, click it.
5. Now a pane shows up, there are two rows of icons below, and one of them is Power
6. Click it
7. Select Shut down
8. You're done.

Using this method we have been able to halve the steps required to shutdown windows. Now you just have to print this short list and paste it at the right side of the monitor of anyone that has to use Windows 8.

That way Microsoft is saving some little pixels on the screen and you just have a little post it on your screen.