Amit's Garage

A garage where one can get tools to solve their problems

Add image uploader feature in Text Editor

November 13, 2017 by BlakDronzer

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
        });
        });

Share :  

999   BlakDronzer    Grocerycrud  
Total 0 Votes:
0
0

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Related Knowledge Base Posts -

  • Take control of the Add / Edit page
  • Conditional Multiselect
  • Default values for Add Form
  • Search Knowledgebase