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

Placeholder text in CKEditor

This weekend I worked on a little bunch of code to support the HTML5 "placeholder" attribute in CKEditor.
The idea is simple: show a little text instead of empty content when the editor loads for the first time, and make it disappear automatically when the content gets focus.
There are two main problems to do this correctly: find out when the editor is focused or blurred and avoid the placeholder text when the content is read by other scripts.
In theory to get the focus status it should be enough to handle the 'focus' and 'blur' events of the editor instance, but one problem is that when a dialog opens the content fires a blur, but in in this situation we don't want to insert again the placeholder text, so the event listener checks if a dialog has been opened before inserting the text.
Passing that check we must verify if the content is "empty" so we get the raw data of the editor and test it again "empty" strings like "<br>" "<p>&nbsp;</p>" and the like that can be generated by different browsers.
As I didn't want to handle yet another plugin I've included it in the configuration Helper plugin and released as version 1.1. Also, the correct name for this plugin is already being used by a plugin that ships with the default CKEditor install but that it's totally unrelated to this feature that plugin resembles more the mail merge fields from MS Word, but at the time that plugin was created I don't think that HTML5 existed.

Demo:

You can set the focus in and out of the editor, type and delete, etc... when the editor isn't focused and it's empty it will show the text that I've specified for the textarea placeholder: "Type here..." While in Source mode it tries to leave that task to the browser if it already supports this feature.