Home    Articles

 

CKEditor upload image plugin – free download

 

This is a very useful tool that i have developed in these days.
This image uploader plugin for CKEditor is free to be used. No purchase is necessary, just download it from here: Download
In order to install it you need to understand that this plugin works as a standalone small website. You can try it on your local apache server.

How to install it:

1) Copy the plugin.
Copy the w3bdeveloper_uimages folder into ckedior plugins folder.

2) Configure the code for your database.
This code needs to create a new table to insert, select images in order to be handled by you.
Open the file config.php from the downloaded zip.
Replace the variables values as follows:

$uploadDir = 'http://your-website/includes/ckeditor/plugins/w3bdeveloper_uimages/'; # the link for the plugin,add slash after
$dbHost = 'localhost';
$dbName = 'your-database-name';
$dbUser = 'your-database-user';
$dbPass = 'the-password';

Now the plugin is installed and configured for your database.

3) Add the plugin to ckeditor instance
In the html code that you fired up the editor like this:

CKEDITOR.replace('ckeditor');

Use this code fireup the edittor and to tell to ckeditor where is located the upload plugin:

CKEDITOR.replace( 'ckeditor', { 
	filebrowserBrowseUrl: 'http://your-website/includes/ckeditor/plugins/w3bdeveloper_uimages/index.php',
        filebrowserWindowWidth: '860',
        filebrowserWindowHeight: '660'
	});

Here is the browse button that will open the plugin:

browse_btn_ckeditor

Now you need to add this javascript function that will make the connection from the ckeditor and this custom code.

function CkEditorURLTransfer(url) 
{
    window.parent.CKEDITOR.tools.callFunction(1, url, '');
    $('#cke_111_textInput').val(url);
 
}

Now that all should be set, you should be able to use the uploader.

list_images_ckeditor

upload_images

You need help with this?...i can help you for a small fee, Contact me at halmageandaniel@yahoo.com

Update:

Many of you asked me why the image is not loaded in dialog when is clicked.

Use this code for CkEditorURLTransfer function. This will fix the issue.

function CkEditorURLTransfer(url) {
    var CKEDITOR_CurrentDialog = (window.parent.CKEDITOR.dialog.getCurrent());
	CKEDITOR_CurrentDialog.selectPage('info');
	CKEDITOR_CurrentDialog.getContentElement('info', 'txtUrl').focus();
	CKEDITOR_CurrentDialog.setValueOf('info', 'txtUrl', url);
};

Enjoy.


by