How do I customize ckeditor's toolbar

Question

I am using ckeditor and want to customize the toolbar and text entering area as the gap between two sentences much. I am unable to find the toolbar.js or config.js where i should do the changes..

how do i customize the above both

Answer 1

Sonal's answer isn't wrong in itself, but DOESN'T REFER TO CKEDITOR. FCKeditor was (and is) a good product, but it's now replaced by the new CKEditor, so using those config might not really work.

As you can read in the docs here, you can pass custom configuration options by editing the config.js file, which is located in the root folder of CKeditor (in a fresh installation..if you moved it act accordingly)

The file already contains these lines:

CKEDITOR.editorConfig = function( config )
{
        // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
};

You can the find the WHOLE list of available configuration in their API DOCS. Coming to your problem, you can set what you want/don't want in your toolbars like this (check the toolbar §):

// 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' ] }
];

As for the lines being to high, I don't know if you want to change at rendering mode or if you want to change the default behaviour of isnerting a <p> tag at each line break. In the latter case, use

config.enterMode = CKEDITOR.ENTER_BR;

You can find a detailed explanation here (EnterMode §)

If you want, you can also pass custom configs at runtime by using:

CKEDITOR.replace( '#textarea_id', { customConfig : '/myconfig.js' } );

Or this (to replace your custom with the fall-back of the default ones)

CKEDITOR.replace( '#textarea_id', { customConfig : '' } );

Answer 2

<script type="text/javascript">
    $(document).ready(function(){
        CKEDITOR.replace(
            'textarea_name',
            {
                toolbar: [
                    ['Image','Flash']
                ],
            },
            {height: 550},{width:500}
        );
    });
</script>