FCKEditor (link) is a powerful, open source HTML editor that is easily incorporated into nearly any site. It allows for customization of the interface, as well as options available to the user.
I recently found the need to customize the styles / CSS that users are able to select using the Editor. Often, users have many styles and fonts they put in a page and before you know it there are 1,000,000 sites with flying toasters and dramatic chipmunks on them again. Consistency and structure are the keys to any well-designed site. Allowing the user to only apply a pre-approved style / font to their content greatly reduces the risk of comic sans and animated gifs.
FCKEditor has a configuration file where nearly every aspect of the utility is customizable (fckconfig.js). This file contains definitions for file paths, colors, fonts, and various other elements. In order to pre-fill colors / fonts / etc, modify the following:
fckconfig.js - Contains configuration settings for FCKEditor
- FCKConfig.FontFormats : Define formats
Ex: 'p;h1;h2;h3;h4;h5;h6;pre;address;div';
- FCKConfig.FontNames : Define available fonts
Ex: 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
- FCKConfig.FontSizes : Define available size
Ex: 'p;div;pre;address;h1;h2;h3;h4;h5;h6' ;
- FCKConfig.CustomStyles : Define insertable styles into text.
Ex: 'Green Title' : { Element : 'h3', Styles : { 'color' : 'Green' } }
- FCKConfig.CoreStyles : Defines core styles. Cannot add/delete. Only modify.
An additional customization would be to preload styles for user to apply to text / images. This will add all of the appropriate surrounding html / styles to the text. In order to preset these styles, do the following:
fcktemplates.xml - Contains Templates definitions which can be inserted. * May require toolbar option to be added.
Ex: <Template title="Image and Title" image="template1.gif">
<Description>One main image with a title and text that surround the image.</Description>
<Html>
<![CDATA[
<img style="MARGIN-RIGHT: 10px" height="100" alt="" width="100" align="left"/>
<h3>Type the title here</h3>
Type the text here
]]>
</Html>
</Template>
Pre-defining these styles, along with the appropriate CSS will enable users to create consistent, well-formatted content. However, by default the "HTML" option is enabled so users could always switch to that view and add to their heart's content.
