How to add image browse and image upload button in ckeditor


Posted on 28 Aug 15 by Vickey

Ckeditor is a most populer text editor.We can change a textarea in to editor very easyly.But in some cases we need some extra functionality in our editor and we can fulfill these needs by adding some extra plugin.For example Color Button,Mathematical Formulas etc. you can use these addon or plugins by putting these in your ckeditor's plugin directory.If you want to insert an image in your editor you need to add image url but you can not upload an image with ckeditor.

 But by using some plugins you can do this. so lets add image upload functionality in ckeditor

1. Download Imageupload plugin

2. Download imgbrowse plugin

3. Extract these in to ckeditor plugins directory

4. Open your ckeditor config.js file and add extraplugin code

CKEDITOR.editorConfig = function( config ) {


5. Now open /ckeditor/plugins/imagebrows/imgbrowse.php and /ckeditor/plugins/imgupload/imgupload.php files and give your upload directory path

protected $root = '/uploads/';

$uploads = '/uploads/';

and you have done


You can download source code here

If this post help you reduce time to develop, you can help me to maintain this website :)