Image paste Plugin for CKEditor

Introduction

This is a plugin that automatically uploads to the server the images pasted from the clipboard with Firefox, or with Drag&drop in most current browsers in CKEditor.

Author:

Alfonso Martínez de Lizarrondo

Version history:

1.0: 28-September-2011. First public version.
2.0: 10-June-2012. Included support for Drag&drop. This version is not open source
2.1: 17-June-2012. Added pasting from clipboard in Chrome. Allow dropping multiple files. Clean up non-valid Safari images (webkit-fake-url)
2.2: 17-July-2012. Avoid problems in Macs pasting from MS Office into Chrome
2.3: 22-September-2012. Show a greyscale animation while uploading a picture (except if it's pasted in Firefox)
Compatiblity with CKEditor 4 beta

Installation

1. Copying the files

Extract the contents of the zip in you plugins directory, so it ends up like this

ckeditor\
	...
	images\
	lang\
	plugins\
		...
		imagepaste\
			plugin.js
			docs\
				install.html
		...
	skins\
	themes\

2. Adding it to CKEditor

Now add the plugin in your config.js or custom js configuration file: config.extraPlugins='imagepaste';

3. Configuration

You have to configure the filebrowserImageUploadUrl and filebrowserUploadUrl entry as you might have already done to allow the user to upload files and images.

4. Use it

Using Firefox, paste an image into the body of CKEditor. That image will be uploaded to the server and it will use the correct URL instead of "data:".

With the rest of the browsers, you can drag & drop a file from your desktop and it will be inserted as an image or a link.
Supported browsers (Current versions or latest beta):

Firefox
Chrome
IE 10
Safari

Opera 12 seems to implement the drag&drop uploads, but they don't provide an API to find the place where the image should be inserted (document.caretPositionFromPoint), so it's the only browser where this plugin won't work until they fix that.