How to configure the CKeditor image upload plugin with Codeigniter

We can easily configure CKeditor and image upload plugin with Codeigniter. While configuring we have to make some changes to the CKeditor links. Now we are going to discuss the fully procedure that how to configure the CKeditor from start.

Step by Step procedure to configure CKeditor and image plugin

First you have need of Ckeditor libraries then you have need of the image upload plugin libraries , here is the fully configure libraries with image uploading plugin. Just download it now.

1- Download Ckeditor Libraries and Pulgin

Download this zip file and extract it we will use the ckeditor folder. Download Now

2- Where to put these Ckeditor libraries

Put these libraries within the base directory or the parallel directories where there are codeigniter application,files and the system folders. In the above image i put it in the assets/ckeditor

.

3- Include the Ckeditor JavaScript library

<script src="<?= base_url('assets/ckeditor/ckeditor.js')?> "></script>

4- Configure simple CKeditor

<textarea name='myeditor'> </textarea> <script type="text/javascript"> CKEDITOR.replace( 'detail'); </script>

5- Configure the image upload plugin URL

<script type="text/javascript"> CKEDITOR.replace( 'myeditor', { extraPlugins: 'imageuploader', filebrowserImageBrowseUrl : '<?= base_url()?>assets/ckeditor/plugins/imageuploader/imgbrowser.php?CKEditor=textarea&CKEditorFuncNum=1&langCode=en-gb' }); </script>

Full Source Code

<textarea name="myeditor"></textarea> <script src="<?= base_url('assets/ckeditor/ckeditor.js')?> "></script> <script type="text/javascript"> CKEDITOR.replace( 'myeditor', { extraPlugins: 'imageuploader', filebrowserImageBrowseUrl : '<?= base_url()?>assets/ckeditor/plugins/imageuploader/imgbrowser.php?CKEditor=textarea&CKEditorFuncNum=1&langCode=en-gb' }); </script>