Kentico Developer - FCKEditor Customisation

FCKEditor Customisation

15 Oct 2009 Matthew Lee 0 comments

Customising available toolbar buttons

Every now and then, we want to allow users to input rich text but want to keep the data simple, and want to provide only a small selection of buttons. eg. bold, italic, and indent.

This is something that can easily be done very easily by editing the fckconfig.js file. The following steps will create a new toolbar set named “Simple”, which will include only 5 basic buttons.

Open the fckconfig.js file which you can find under

\CMSAdminControls\FCKeditor\

and enter the following in the ToolbarSet section

FCKConfig.ToolbarSets[“Simple”] = [[‘Bold’,’Italic’,’Underline’,’OrderedList’,’UnorderedList’]] ;

Save your changes.

We now have a toolbar set, but we have not yet applied it. Edit an existing bizform or document type form and create a new field with the following properties

attribute name: Content
attribute type : Long Text
Field Caption : Content
Field Type : HTML Area (formatted text)
HTML editor toolbar set : Simple

Clear the cache in your browser to make sure the new FCKEditor configuration is loaded, and open the bizform. You should now see an FCKEditor with a toolbar containing only 5 buttons. The buttons available for inclusion can be found in the FCKEditor documentation.

The HTML editor toolbar Set property can also be set in editable text webparts.

Different toolbars for different users

Assume for a second that we have 2 roles, public_user and internal_staff, and that we want to display different toolbar sets for these 2 roles on the same page.

We can do this by making use of alternative forms and using roles to determine which form is displayed.

This means that we can provide a public user with a simplified toolbar set containing only a couple of buttons, and an internal staff member with a comprehensive toolbar set.

Create a Bizform named “Sample_BizForm”, and add all of the fields you’d like captured, making sure to enter “Simple” in the HTML editor toolbar set property for the long text field which will use the editor.

Then add an alternative form named “Internal“, making sure to enter “Comprehensive” in the Toolbar set property for the long text field which will use the editor.

Of course this assumes that you have already created two toolbar sets, named “Simple”, and “Comprehensive”.

The next step is to then add two bizform web parts to a page, with the following properties

Web part 1

Web part control ID: biz_public
Display to roles: public_user
Form name: Sample

Web part 2

Web part control ID: biz_public
Display to roles: internal_staff
Form name: Sample
Alternative form name: BizForm.Sample_Bizform.Internal

What you end up with is:

a bizform web part which is displayed to any public_user, that uses the default bizform, and along with it the Simple toolbar for the FCKEditor
a bizform web part which is displayed only to internal_staff, that uses the alternative bizform, and along with it the Comprehensive toolbar for the FCKEditor

Styling the editor

Another web part property which can be used to customise the look and feel of the FCKEditor is the HTML editor css stylesheet property, wich applies a specific stylesheet to the FCKEditor and making it prettier, and more consistent with the rest of your website.

By default, the Formatted text HTML area field does not apply a stylesheet, meaning that styles (e.g. font size, color , etc) tend to be quite different from the rest of the website.

The Editabletext webpart uses the default website stylesheet, which in many cases makes the FCKEditor look weird and out of place, especially when there is background image style rule.

The fix for this is pretty straightforward. If you create a new stylesheet in Kentico especially for the FCKEditor, you can choose how things appear, copying major styles from the site stylesheet in order to have the editor fit in with the rest of the site.

As a very interesting alternative, it is possible to configure the editor not for final output, but to highlight instead what is happening at the time of input.

WYMEditor (wymeditor.org) styling for example allows the user to see exactly where styles have been applied, where paragraph blocks begin and end, and where line breaks have been used instead of paragraphs. WYMEditor styling is achieved by appying a simple stylesheet and making use of the FCKEditor’s Show Blocks function - see customising behaviour.

Customising behavior

Within FCKConfig.js, there are some properties which are worth look at. By changing these setting, it is possible to make your editor more user-friendly.

FCKConfig.EnterMode

By default a line break is generated by the editor when the enter key is pressed, but it is possible to instead begin a new paragraph, or a new div.

FCKConfig.ShiftEnterMode

By default a paragraph is generated by the editor when the shift key is pressed along with the enter key, but it os possible to instead generate a line break, or a new div.

FCKConfig.RemoveFormatTags

When set, the FCKEditor will remove the specified HTML tags from the outputted content.

FCKConfig.StartupShowBlocks

Displays HTML blocks visibly to the user when set.