The content is all about customizing FCKEditor that is well integrated with ColdFusion.
The content is all about customizing FCKEditor that is well integrated with ColdFusion.
We have an editor known as FCKEditor to edit HTML content.
We can use this editor by use of cftextarea in our Application.
This gives us a complete set of tools for editing which needs a good amount of space in width to accommodate and also we may not need all the tools always, that is for different requirements we should have different set of tools.
So we can create toolset of our choice by making some change in fckconfig.js file.
For this we need to follow following steps.
1. Open the fckconfig.js file, which exists in following path:
~\Inetpub\wwwroot\CFIDE\scripts\ajax\FCKeditor\fckconfig.js
2. Here we need to write code to customize our FCK editor.
Example of a customized toolset:
FCKConfig.ToolbarSets["toolSetName"] = [ ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript','-','OrderedList','UnorderedList','-','Outdent', 'Indent','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyFull','-', 'Undo','Redo','-','SelectAll','RemoveFormat','-','Link','Unlink','Anchor','-','Image','Flash','Table','Rule','SpecialChar','PageBreak'], '/', ['Style','-','FontFormat','-','FontName','-','FontSize','-','TextColor','BGColor','-','Find','Replace','-','Source','Preview','FitWindow'] ];
Here we have to follow following rules to customize the tools.
— Each tool need to be written with in single quote. — To keep all the tools in a single line, we need to put them with in a pair of square brackets. — To separate two lines use forward slash(‘/’). — To group tools with in a line, need to separate groups by a hyphen(‘-‘).
— Each tool is separated by comma.
3. We do have a toolbar set know as default tool bar set in fckconfig.js file which contains all available tools. So we can get our required tools out of here and create our customized toolbar set. 4. We have to write our customized code bellow the default toolbar set.
5. We need to make use of the name of our customized toolset in our application as bellow.
#variables.details#
6. Then we need to clear cache of our page and refresh to see the changed toolbar style of fckeditor.
Hopefully you would like your customized toolbar in FCK editor.