Please wait for 15 seconds...

Saturday, 10 August 2013



Ckeditor is a very popular browser based text editor. Ckeditor is very flexible to customise. By default there are bunch of tools in its toolbar and we often do not use most of them. Let's find out how to customise ckeditor toolbar icons.
To customise this toolbar icons we have to remove them with our custom assigned toolbar icons.

Default Toolbar Icons

CKEDITOR.replace( 'ckeditor_id',
{ toolbar: [
{ 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','Iframe' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] } ]
});

This is default toolbar structure. Now remove any line or icon that you do not want to appear on your Ckeditor toolbar. Suppose you do not need font formatting icons then remove below code from default toolbar icons code(above).

{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] }

or just want to remove a single icon then remove just one keyword.

{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] }

Note: If you want to break line between two rows then use '/' for it.

Do not hesitate to leave your query/comment, enjoy.

Posted by Atul Prasad Gupta

0 comments:

Post a Comment

Subscribe Techsirius

Techsirius on Facebook