CODEWITHSUNDEEP
javascriptckeditor
Arendelle
Arendelle

Reputation: 127

How to custom a toolbar in ckeditor?

I have a problem with my CKEDITOR. I try to customise the toolbar to have juste the button I want but when I try to put a toolbar in the code I have no toobar in ckeditor on my web app. I mean my ckeditor is created but I don't have the toolbar.

this is my javascript code:

var editor = CKEDITOR.replace( 'professionnal_mailtemplate_response_template', {
     toolbar: [

         { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat', 'TextColor', 'BGColor' ] },
         { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
         { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
         { name: 'links', items: [ 'Link' ] }
     ]
 } );

 CKFinder.setupCKEditor( editor, '/../js/ckfinder/' )

Someone can help me please ? Because I search but for now I didn't find what is wrong.

Thank in advance!!!

Upvotes: 0

Views: 1388

Answers (1)

user6100520
user6100520

Reputation:

I believe, with this configuration you need to use toolbarGroups property, not toolbar:

var editor = CKEDITOR.replace( 'professionnal_mailtemplate_response_template', {
     toolbarGroups: [
         { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat', 'TextColor', 'BGColor' ] },
         { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
         { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
         { name: 'links', items: [ 'Link' ] }
     ]
 } );

Upvotes: 1

Related Questions