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';
|