How to customise toolbar in WCM HTML Editor

As most of our WCM users are aware, WCM uses a very popular HTML Editor call FCKEditor. It provides a very powerful Word-like interface. It is lightweight and does not required any installation on the Client Computer.

There are number of pre-configured toolbar sets which can be selected in WCM HTML Editor. These toolbar sets include:

• Default (wcmbase)
• Default plus Tables (wcmtables)
• Default plus Font Face and Size (wcmffs)
• Default plus tables and font face and size (wcmffstable)
• Default plus view source (wcmsource)
• All (wcmall)

The configuration file is called wcmconfig.js and can be found in the C:\Program Files\TRIM Context\WCM\FCKEditor directory.

To customise the toolbar, just locate the correct toolbar set definition and add/remove functions as required. For example, to remove the Justification and indent capability on the default toolbar set, change the configuration for the default toolbar set from:

FCKConfig.ToolbarSets["wcmbase"] = [['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],['OrderedList','UnorderedList','-','Outdent','Indent'],['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],['Link','Wcm_Doc','Wcm_Page','Unlink','Anchor'],['Wcm_Img','Rule','SpecialChar','PageBreak','UniversalKey'],['TextColor','BGColor']] ;

To:

FCKConfig.ToolbarSets["wcmbase"] = [['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],['OrderedList','UnorderedList','-','Outdent','Indent'],['Link','Wcm_Doc','Wcm_Page','Unlink','Anchor'],['Wcm_Img','Rule','SpecialChar','PageBreak','UniversalKey'],['TextColor','BGColor']] ;

Remember to back up a copy of the original wcmconfig.js file before making the change. In addition, make a copy of the changed wcmconfig.js before upgrading WCM as this file will be replaced during a WCM Upgrade.

Create your own toolbar

It is possible to create your toolbar as well and use it within WCM HTML Editor. To configure WCM HTML Editor to use a customised configuration file, follow the steps outlined below:

1. Open the HTML Editor item in Page Template
2. Under the HTML formatting options and select Custom
3. Enter the Toolbar name, in this case, it is called mytoolbarset
4. Specify the full URL path to your config file location in config file location

By default, the FCKEditor configuration file is located at C:\program files\TRIM Context\WCM\FCKEditor, in which, could be referred to via http://<server-name>/wcmadmin/FCKEditor/customconfig.js through the web server.

Alternatively, for easy customisation of this file, the configuration could be stored within WCM script library (e.g. http://<server-name>/<virtual-directory>/_scripts/<library_name>/customconfig.wcm). This will allow easy management of the toolbar set in WCM scripts library without file access to the web server. For more information on how to refer to a script library using an URI, please read the article URI usage in WCM.

The customconfig file could contains something like this:

FCKConfig.ToolbarSets["mytoolbarset"] = [['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'], ] ;

This will contain one set of buttons which allow only functions that was specified above.

References

For further information on how to customise FCKEditor, please see FCKEditor documentation at http://docs.fckeditor.net/