Tabbed Image Browser Plugin for CKEditor

Introduction

This is a plugin that automatically uploads to the server the images pasted from the clipboard with Firefox in CKEditor.

Author:

Purab Kharat

Version history:

1.0: 30-April-2014. First public version.

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\
		...
		tabbedimagebrowser\
			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='tabbedimagebrowser'; CKEDITOR.config.tabbedimages = new Array("http://www.iiacanadanationalconference.com/wp-content/uploads/2013/01/test.jpg", "http://www.iiacanadanationalconference.com/wp-content/uploads/2013/01/test.jpg", "http://www.iiacanadanationalconference.com/wp-content/uploads/2013/01/test.jpg", "http://www.iiacanadanationalconference.com/wp-content/uploads/2013/01/test.jpg"); CKEDITOR.config.tabbedthumbimages = new Array("http://www.iiacanadanationalconference.com/wp-content/uploads/2013/01/test.jpg", "http://www.iiacanadanationalconference.com/wp-content/uploads/2013/01/test.jpg", "http://www.iiacanadanationalconference.com/wp-content/uploads/2013/01/test.jpg", "http://www.iiacanadanationalconference.com/wp-content/uploads/2013/01/test.jpg");

3. Reload the Image Browser

You need to pass the updated image urls to config variable through javascript or php. var vTypeOf = typeof(CKEDITOR); if(vTypeOf == 'object') { CKEDITOR.config.tabbedimages = ; CKEDITOR.config.tabbedthumbimages = ; if (typeof ReplaceDSbrowserHTML == 'function') { ReplaceDSbrowserHTML(); } }

4. Configuration

You have to configure the filebrowserImageUploadUrl entry as you might have already done to allow the user to upload images. You can get a simple script to use as a guide for your code in this post in my blog. I explained upload and browser functionality in detail.

5. 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:".