Friday, 6 September 2013

FckEditor Custom Toolbar- Mange Tools

FckEditor Custom Toolbar
FckEditor is web based "Text Editor" used in all web application whether application is created in Java, ASP OR PHP etc. This text editor used while submit the form like Registration Form, Detail Form, Feedback Form and Comment form. Most of the time this form used in Comment form where user give his reply on the particular page OR on other user's reply.

In the Text editor, User can do lot of things like add rich text(Bold, Italic, Underline, Text alignment etc), upload photos, upload videos, created custom form etc. In the Text editor there are lots of button (like bold, Italic, image upload etc) in Toolbar. Toolbar also divided in number of types like Basic Toolbar, Standard Toolbar, Full toolbar & Custom toolbar.


In the Basic Toolbar, there will be less button like bold, Italic etc
In the Standard toolbar, there will be more button as compare to Basic Toolbars like Image upload, video upload etc
In the Full Toolbar, there will be have all the buttons which are provided by FckEditor.
In the Custom Toolbar, Developer can decide what buttons he will give the user to use. only provided button by developer will be visible to the users.
config.toolbar_Basic =
[
 ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];

config.toolbar_Standard =
[
 
 { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
 { 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: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
 { name: 'colors', items : [ 'TextColor','BGColor' ] },
 
];

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','Iframe' ] },
 '/',
 { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
 { name: 'colors', items : [ 'TextColor','BGColor' ] },
 { name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];
 
config.toolbar_Basic =
[
 ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About'],
        { name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 
        'HiddenField' ] },
];

Follow Below Simple Steps to Create Custom Toolbar


1) Open file "fckconfig.js"

2) There will be list of ToolbarSets like below 'FCKConfig.ToolbarSets["Default"]'

3) Create New ToolbarSets like below
__________________________________________________ 
FCKConfig.ToolbarSets["MyCustomToolBar"] = [ 

    ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'] 

            // No comma for the last row. 

] ;

//you can add / remove the tags like 'bold', 'underline'
__________________________________________________ 
4) now you "MyCustomToolBar" instead of "Default"

Best Related Posts are Following:

  1. Image not displaying uploaded by CKeditor.
  2. How to change FCKeditor skin, ToolbarSet, height and width..
  3. FckEditor Custom Toolbar- Mange Tools.
Labels: