Bit-Wizards - Custom Styles / CSS using FCKEditor

Custom Styles / CSS using FCKEditor

Posted on November 21, 2008

Share This

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.

Comments

Miriam 10/1/2010 3:12:52 PM

"FCKConfig.CustomStyles : Define insertable styles into text.
Ex: 'Green Title' : { Element : 'h3', Styles : { 'color' : 'Green' } }"

This doesn't seem to be css. This will as far as I can tell so far, create <h3 style="color:green">, and everything has to be defined not in the css style sheet where it belongs but as modifications to the config file.

Is it possible in FCK to create a Style menu choice that adds "Special style" to the drop down, and in the text makes the selected text <p class="Special style">, and the definition of "special Style" resides in the css file?

Bryan Soltis 10/1/2010 3:13:07 PM

You're correct. It isn't actual CSS. It's more of building up HTML tags along with styles. As far as making a "style" selection, I'm not sure. If there is, I haven't found it yet. Even with the above method, it's very difficult and cumbersome to customize the editor.

Ideally, I think it would be best to have an actual CSS file that was included with the Editor. Then you could customize it appropriately. The Editor would automatically pull in the CSS and load the styles accordingly.

Pete 10/1/2010 3:13:34 PM

You can use the fckstyles.xml file in the FCK root to add any styles that you need. For example:

<Style name="Notes" element="div">
<Attribute name="class" value="notes" />
</Style>

Will give you a div with a class of 'notes' which you can define in your css.

Mark 10/1/2010 3:13:54 PM

What an silly way of defining a style. There is an existing technology called CSS that the designers surely have heard about. Should be a stand-alone CSS file for controlling all styles.

<Style name="Notes" element="div">
<Attribute name="class" value="notes" />
</Style>

atlix 10/1/2010 3:14:15 PM

awesome fix...i made an advanced forum in drupal for these people ready to use a forum and man did they screw everything up after it was perfect. im using your config this time around