Add image uploader feature in Text Editor

Scenario:
Grocerycrud have been majorly being used to build backend applications and therefore having a feature like uploading images from backend is very much a necessity if you want to use Grocerycrud as a tool for building your custom CMS (Content management system). But currently Grocerycrud dose not have in built support to do so.

Solution:
There are paid applications like CKFinder (which binds very well with CKEditor), but there is also an option which can be utilized for free. That is KCFinder (unfortunately the official site for the same is down but the link associated of sourceforge.net works fine.)

Now, in a brief – how to integrate the same with Grocerycrud.

1. Download KCfinder
2. Copy it to texteditor folder
3. in kcfinder/conf/config.php enable config ‘disabled’ => false and set path to upload in ‘uploadURL’ => “your_folder”
4. add some code in ckeditor config in assets/grocery_crud/js/jquery_plugin/config/jquery.ckeditor.config.js

$(function() {
        $('textarea.texteditor').ckeditor({
                language: 'en',
                extraPlugins : 'placeholder,youtube'
                toolbar: [
                ['Source','-','Save','NewPage','Preview','-','Templates'],
	  	['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
		['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
		['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
		'/',
		['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
		['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
		['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
		['Link','Unlink','Anchor','Youtube'],
		['Image','Flash','Table','HorizontalRule','Hhs','Smiley','SpecialChar','PageBreak'],
		'/',
		['Styles','Format','Font','FontSize'],
		['TextColor','BGColor'],
		['Maximize', 'ShowBlocks','-','About','CreatePlaceholder']

        ],
                //this code below for kcfinder           
                filebrowserBrowseUrl: '/assets/grocery_crud/texteditor/ckeditor/kcfinder/browse.php?opener=ckeditor&type=files',
                filebrowserImageBrowseUrl: '/assets/grocery_crud/texteditor/ckeditor/kcfinder/browse.php?opener=ckeditor&type=images',
                filebrowserFlashBrowseUrl: '/assets/grocery_crud/texteditor/ckeditor/kcfinder/browse.php?opener=ckeditor&type=flash',
                filebrowserUploadUrl: '/assets/grocery_crud/texteditor/ckeditor/kcfinder/upload.php?opener=ckeditor&type=files',
                filebrowserImageUploadUrl: '/assets/grocery_crud/texteditor/ckeditor/kcfinder/upload.php?opener=ckeditor&type=images',
                filebrowserFlashUploadUrl: '/assets/grocery_crud/texteditor/ckeditor/kcfinder/upload.php?opener=ckeditor&type=flash'



        });
        $('textarea.mini-texteditor').ckeditor({
                language: 'en',
                toolbar: 'Basic',
                width: 700
        });
        });