How to add image browse and image upload button in ckeditor

Others

Posted on 28 Aug 15 by Vickey
  2915



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 ) {

	config.filebrowserBrowseUrl='/ckeditor/plugins/imagebrows/imgbrowse.html';
	config.filebrowserImageUploadUrl='/ckeditor/plugins/imgupload/imgupload.php';
};

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 :)
www.000webhost.com