[Antonio Giungato]

Hi,

I'm learning grocery CRUD, i think it's awesome... thanks!
I'd like to change CKEditor configuration, hiding unessential items in toolbar etc. 

Can you point me in the right direction?

 

Thanks,

Antonio

[victor]

as I seem there is a topic about your problem. try find it.

[davidoster]

Under application/config/grocery_crud.php youi will find these lines:

//You can choose 'ckeditor','tinymce' or 'markitup'
$config['grocery_crud_default_text_editor'] = 'ckeditor';
//You can choose 'minimal' or 'full'
$config['grocery_crud_text_editor_type'] = 'minimal'; 

 

Other than that you need to go to assets/grocery_crud/js/jquery_plugins/config/jquery.ckeditor.config.js and change there whatever you need.

[Antonio Giungato]

Thank you for your reply.

I'm looking at assets/grocery_crud/js/jquery_plugins/config/jquery.ckeditor.config.js right now:

 

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

Now I'd like to change the toolbar appearance using something like this (taken from here):

// This is actually the default value.
config.toolbar_Full =
[
    { name: 'document',    items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
    { name: 'clipboard',   items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
    { name: 'editing',     items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
    { name: 'forms',       items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
    '/',
    { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
    { name: 'paragraph',   items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
    { name: 'links',       items : [ 'Link','Unlink','Anchor' ] },
    { name: 'insert',      items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] },
    '/',
    { name: 'styles',      items : [ 'Styles','Format','Font','FontSize' ] },
    { name: 'colors',      items : [ 'TextColor','BGColor' ] },
    { name: 'tools',       items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];

but I'm lost :(

[Antonio Giungato]

I think I found out how to configure CKEditor using jquery.

In jquery.ckeditor.config.js:

 

$(function(){
        $( 'textarea.texteditor' ).ckeditor(
                $.noop,{toolbar_Full:[['Undo', 'Redo'], 
                                      ['Bold', 'Italic', 'Underline'], 
                                      ['NumberedList', 'BulletedList'],
                                      ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock']],
                         width:700
        });
        $( 'textarea.mini-texteditor' ).ckeditor({toolbar:'Basic',width:700});
});

 

Thanks for your help!

[davidoster]

You can also do this,

 

open this file assets/grocery_crud/texteditor/ckeditor/config.js and do something like this,

CKEDITOR.editorConfig = function( config )
{
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
	CKEDITOR.config.toolbar_MyBasic = [['Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat']];
	//config.toolbar = 'MyBasic';
};

 

and then on the assets/grocery_crud/js/jquery_plugins/config/jquery.ckeditor.config.js you can have something like this

$(function(){
	$( 'textarea.texteditor' ).ckeditor({toolbar:'Full'});
	$( 'textarea.mini-texteditor' ).ckeditor({toolbar:'MyBasic',width:700});
});

[bianconeri]

My config.js 
 

CKEDITOR.editorConfig = function( config )

{

CKEDITOR.config.toolbar_Crud = [['Bold']];

config.toolbar = 'crud';

};

And grocery_crud.php

$config['grocery_crud_text_editor_type'] = 'crud';

But the ckeditor call the full.
 

[larasmith]

 

You can also do this,

 

open this file assets/grocery_crud/texteditor/ckeditor/config.js and do something like this,

CKEDITOR.editorConfig = function( config )
{
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	// config.uiColor = '#AADC6E';
	CKEDITOR.config.toolbar_MyBasic = [['Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat']];
	//config.toolbar = 'MyBasic';
};

and then on the assets/grocery_crud/js/jquery_plugins/config/jquery.ckeditor.config.js you can have something like this

$(function(){
	$( 'textarea.texteditor' ).ckeditor({toolbar:'Full'});
	$( 'textarea.mini-texteditor' ).ckeditor({toolbar:'MyBasic',width:700});
});

This is interesting. Can you also show a similar method using tinyMCE? Thank you very much! :)

[nomanchokorborti]

You can customize the toolbar in the way you like comfortable...

 

To add a CKEditor instance with custom toolbar setting, insert the following JavaScript call to your code:

CKEDITOR.replace( 'textarea_id', {
	toolbar: [
		{ name: 'document', items: [ 'Source', '-', 'NewPage', 'Preview', '-', 'Templates' ] },	// Defines toolbar group with name (used to create voice label) and items in 3 subgroups.
		[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ],			// Defines toolbar group without name.
		'/',																					// Line break - next group will be placed in new line.
		{ name: 'basicstyles', items: [ 'Bold', 'Italic' ] }
	]
});