|
Defining custom toolbars |
|
|
|
|
|
Defining custom toolbars |
|
|
|
|
The toolbar of the WYSIWYG editor can be customized so that the content editors cannot use all the formatting features. It helps to keep the website design consistent and clean.
Defining the toolbar sets
You can define toolbar sets in <web project>\CMSAdminControls\FCKeditor\fckconfig.js.
You can define your own toolbar set by adding a command like this to the fckconfig.js file:
FCKConfig.ToolbarSets["Default"] = [ ['Source', '-', 'Preview'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteWord', '-', 'Print'], ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'], ['Bold', 'Italic', 'Underline', 'StrikeThrough', '-', 'Subscript', 'Superscript'], ['OrderedList', 'UnorderedList', '-', 'Outdent', 'Indent'/*, 'Blockquote'*/], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyFull'], ['InsertLink', 'Unlink', 'Anchor'], ['InsertImageOrMedia', 'QuicklyInsertImage', 'Table', 'Rule', 'Smiley', 'SpecialChar', 'PageBreak'], ['InsertBizForms', '-', 'InsertInlineControls', '-', 'InsertPolls', '-', 'InsertRating', '-', 'InsertYouTubeVideo'], '', '/', ['Style', 'FontFormat', 'FontName', 'FontSize'], ['TextColor', 'BGColor'], //['AutoSave'], ['FitWindow', 'ShowBlocks'] // No comma for the last row. ]; |
As you can see, the toolbar set definition consists of several arrays, such as ['Source','-','Preview']. This array displays a group of two icons: Source and Preview, separated with a vertical line (defined by the '-' string).
You can insert a line break between the icon groups using the '/' string.
The code example above is the default toolbar set and contains all possible icons. You can create your custom toolbar sets by modifying it or using the icon names from it.
Save the changes you made to the fckconfig.js. Then, you need to clear the browser cache so that the file is updated in your browser.
|
Changes to the fckconfig.js file require clearing browser cache!
Every time you modify the fckconfig.js file (or any other file that is used for the WYSIWYG editor), you need to clear your browser cache so that the changes are applied. In Internet Explorer 7.0, you need to click Tools -> Delete browsing history... and click Delete files... |
Then, you need to configure the page or document type so that it uses your new toolbar as described in the next paragraph.
Assigning the toolbar set to the page
If you want to assign the toolbar set to some page with editable regions (edited on the Page tab), you need to configure the web parts of type "Editable region" on the page template and set their Toolbar set property to the name of your toolbar set (in the example above, it's Default).
Toolbar set used for structured documents
If you want to modify the toolbar set used for structured documents (edited on the Form tab), you need to set the value of the Toolbar set property of the custom field. If you share the toolbar between multiple fields, the first field's toolbar set will be used.
|
Standard toolbar sets
Kentico CMS uses some standard toolbar sets that are used by Kentico CMS modules:
|
Page url: http://devnet.kentico.com/docs/devguide/index.html?defining_custom_toolbars.htm
