CODEWITHSUNDEEP
javascriptckeditor
Daniel Ellison
Daniel Ellison

Reputation: 1347

Multiple Ckeditor inline editors with custom toolbar

I currently have a page with about 13 text area boxes and each has their inline editor defined. The default tool bar is full but I would like the change the default toolbar layout for all my inlines, to only keep the needed buttons/functionality.

Here is my script, how would I be able to reference to a custom toolbar?

<script>
    CKEDITOR.inline( 'inline_editor1' );
    CKEDITOR.inline( 'inline_editor2' );
    CKEDITOR.inline( 'inline_editor3' );
    CKEDITOR.inline( 'inline_editor4' );
    CKEDITOR.inline( 'inline_editor5' );
    CKEDITOR.inline( 'inline_editor6' );
    CKEDITOR.inline( 'inline_editor7' );
    CKEDITOR.inline( 'inline_editor8' );
    CKEDITOR.inline( 'inline_editor9' );
    CKEDITOR.inline( 'inline_editor10' );
    CKEDITOR.inline( 'inline_editor11' );
    CKEDITOR.inline( 'inline_editor12' );
    CKEDITOR.inline( 'inline_editor13' );
</script>

Upvotes: 1

Views: 3212

Answers (1)

Joel Peltonen
Joel Peltonen

Reputation: 13442

You can give each CKEDITOR instance a different config object as can be seen at http://docs.ckeditor.com/#!/api/CKEDITOR-method-inline and you can define a custom toolbar for each configuration option as seen here: http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-toolbar

So, you could have something like this untested code:

<script>
var cfg1 = { toolbar: 'Basic' };
var cfg2 = { toolbar: 'Full' };
var cfg3 = { 
    uiColor: '#FF69B4', 
    toolbar: [
        [ 'Source', '-', 'Bold', 'Italic' ]
    ]
};

CKEDITOR.inline( 'inline_editor1', cfg1 );
CKEDITOR.inline( 'inline_editor2', cfg2 );
CKEDITOR.inline( 'inline_editor3', cfg3 );
</script>

Upvotes: 3

Related Questions