Web Technology Experts Notes

Friday, 6 September 2013

FckEditor Custom Toolbar- Mange Tools

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"

jQuery datepicker first week monday

jQuery DatePicker is a Plugin provided by jQuery.com, This date picker enable user to select the dates like Date of Birth, Date of joining and select two dates. It have excellent feature like change the date format of date, disable the selection of previous date, disable the selection of next year, show the dates picker in different languages like chinse. You can do the lot of custom changes. All custom changes are available in their website.

Now, many different countries use different date format like USA start date with month, Indian start date with day and some country start date with year. This is 100% configurable in the jQuery plugin. you can set the dateFormat while creating the instance of date picker.

By default, the Datepicker opens in a small overlay onFocus and closes automatically onBlur or when a date is selected. For an inline calendar, simply attach the Datepicker to a div or span.

While creating the instance of datepicker, you can also change the what day of the week. You can start first day as Sunday OR Monday as per your requirement.n See the Following Example.

Change the first week from Sunday=>Monday

Just set the firstDay:1 which is 0 by default

jQuery('#date').datepicker({ 
    changeMonth: true, 
    changeYear: true, 
    dateFormat: "mm/dd/yy", 
    firstDay: 1 
   });

Another Example for multiple date option

$('.date').datepicker({
    constrainInput: true,   // prevent letters in the input field
    minDate: new Date(),    // prevent selection of date older than today
    showOn: 'button',       // Show a button next to the text-field
    autoSize: true,         // automatically re-size the input field 
    altFormat: 'yy-mm-dd',  // Date Format used
    beforeShowDay: $.datepicker.noWeekends,     // Disable selection of weekends
    firstDay: 1 // Start with Monday
})

Demo: http://docs.jquery.com/UI/Datepicker