CODEWITHSUNDEEP
jqueryckeditor
user1019706
user1019706

Reputation: 77

How do I customize ckeditor's toolbar

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

Upvotes: 6

Views: 34218

Answers (4)

Tanvir Ahmed Howlader
Tanvir Ahmed Howlader

Reputation: 65

its Working for me

CKEDITOR.replace('article', {
    toolbar: [
        ['Bold', 'Italic', 'Underline', 'Strike', 'TextColor', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink']
    ]
});

enter image description here

Upvotes: 0

Monzur
Monzur

Reputation: 1435

This is most easy example

CKEDITOR.replace('textarea_id', {
    toolbar: [
        ['Bold', 'Italic', 'Underline', 'Strike', 'TextColor', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink']
    ],
    height: 100,
    skin: 'v2',
    enterMode: 1,
    shiftEnterMode: 2
});

Upvotes: 2

Arjun Choudhary
Arjun Choudhary

Reputation: 203

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

Upvotes: 6

Damien Pirsy
Damien Pirsy

Reputation: 25445

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

Upvotes: 40

Related Questions