Creating our own ToolBarSet

As we know, FCKeditor will have 2 default tool set, Default and Basic. Read Part 1 for more info. Not every time, we can live with these 2 default tool set. We will always have different requirements in different project that requires creating custom tool bar set for our Rich Text editor. FCKeditor has the flexibility to define our own toolbar set.

To create a new toolbar set,

Go to your fckeditor folder in solution and open fckconfig.js file. This file will have all the default configuration settings required to load the FCKeditor.

You can find the default toolbar set’s configuration settings here. Refer the below code,

FCKConfig.ToolbarSets["Default"] = [ Options ] ;

FCKConfig.ToolbarSets["Basic"] = [ Options ] ;

We can create a new toolbar set just below these settings by supplying whatever style options we may require. To create toolbar set with name “MyRTF”,

FCKConfig.ToolbarSets["MyRTF"] = [

       ['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']

] ;

Save the file. To apply this custom toolbar set to our editor, we need to set the ToolbarSet property of the control to “MyRTF”. So the code will look like,

<FCKeditorV2:FCKeditor ID="rtfComments" BasePath="fckeditor" ToolbarSet="MyRTF" runat="server">

</FCKeditorV2:FCKeditor>

Execute the page and you can see the custom toolbar set appearing with the editor.

The disadvantage of this approach is, when we need to upgrade the editor to a newer edition it will replace our custom configuration settings in the file and we should re-configure it again. It will be good if we can segregate these settings into a separate file.

To do this, create a new JavaScript file, say fcksettings.js, in a separate folder in the solution. Refer the below figure,

I have created under a folder named RTFSettings.

Now, move the custom toolbar set configuration we created in the fckconfig.js file to this new file.

To make the FCKeditor to take the config settings from our file, we need to configure a property called CustomConfigurationsPath in aspx or codebehind,

<FCKeditorV2:FCKeditor ID="rtfComments" BasePath="fckeditor/" CustomConfigurationsPath="/Test/RTFSettings/fcksettings.js" ToolbarSet="MyRTF" runat="server">

</FCKeditorV2:FCKeditor>

Here, Test is the project directory name. Execute the page and you can see the custom toolbar appearing with the editor.

Note

We can also set this property in fcksettings.js file. Search for CustomConfigurationsPath property in this file and set the file path.

FCKConfig.CustomConfigurationsPath = '/Test/RTFSettings/fcksettings.js';

Skins and Custom Skin for FCKeditor

A skin controls the appearance of the FCKeditor.

By default, the editor is packed with 3 different skins,

1.      Default

2.      Office 2003

3.      Silver

We can find all the style files required for the skins under the folder fckeditor/editor/skins/.

You can change a property called SkinPath either in aspx/codebehind or in fckconfig.js to configure a skin. By default, it will be configured with default skin. To make it as silver,

FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/silver/';

Execute the page and you can see the new skin applied to the editor.

At times, we may require customizing the look and feel of the FCKeditor control to match our project’s color codes and appearance. To do this, we need to create custom skin with our own customizations syles.

To create a new skin, we will require all the files you see for default skin folder. We can copy the default skin folder into our own folder and rename it. Refer the below figure.

We can now change all the styles in stylesheet files under the folder to fit our need. To set the custom skin, again we need to set the SkinPath property of FCKEditor either in fckconfig.js file or aspx/codebehind to point to our skin folder. Refer below code,

<FCKeditorV2:FCKeditor ID="rtfComments" BasePath="fckeditor/" SkinPath="/Test/RTFSettings/MySkin/" CustomConfigurationsPath="/Test/RTFSettings/fcksettings.js" ToolbarSet="MyRTF" runat="server">

</FCKeditorV2:FCKeditor>

Customizing Editor Area

This is another area which needs to be changed to match our project’s styles. For example, the default font in the editor area may be different from our project’s font. For FCKeditor, we can see all the styles of editor area defined in folder fckeditor/editor/css/ fck_editorarea.css.  We can customize the styles in this file or an external style file and configure the EditorAreaCSS property either in fckconfig.js file or aspx/codebehind to pick our style file like we did in previous sections.

Client Side Interactions with FCKeditor

In this section, we will see how we can validate an FCKeditor for mandatory using validation control. We can do a mandatory check for FCKeditor using CustomValidator control in asp.net. Refer the below code,

Validation function

function RTFMandatoryValidate(source,args)

    {

    var RTF = FCKeditorAPI.GetInstance('rtfComments');

    if(RTF.EditorDocument.body.innerText.length==0)

    {

        args.IsValid = false;

        RTF.EditorDocument.body.focus();

        return;

    }

    args.IsValid = true;   

    return;

    }

Control in ASPX

 <FCKeditorV2:FCKeditor ID="rtfComments" BasePath="fckeditor/" CustomConfigurationsPath="/Test/RTFSettings/fcksettings.js" ToolbarSet="MyRTF" SkinPath ='/Test/RTFSettings/MySkin/' runat="server">

</FCKeditorV2:FCKeditor>

<asp:CustomValidator ID="CustomValidator1" runat="server" ClientValidationFunction="RTFMandatoryValidate"

ErrorMessage="Pls Enter Some Comments"></asp:CustomValidator>