<< BlogEngine.NET Positional Breadcrumbs | Exporting Contacts and subfolders to a CSV file in Outlook 2007 >>

Custom Styles / CSS using FCKEditor

Friday, November 21, 2008 06:17 | posted by: bryan

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:

fkconfig.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.

51dbae96-2148-4b14-9226-190451a15cf3|3|4.0

Tags: fckeditor css

(8) comments Delicious

Filed under: Design

Using Kentico-based CSS styles with FCKEditorKentico CMS is a great platform for developing and maintaining content driven websites. The product ...Visual Studio 2008 Custom Item Templates Not Showing UpAccording to Microsoft documentation, you are supposed to be able to just drop in custom item templa...Force IIS to render sites as IE7Coding for IE 8 is a daunting task. The new browser has increased its security and lowered its tole...

Comments

February 22. 2009 21:26

"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?

Miriam

February 23. 2009 07:13

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.

bryan

June 16. 2009 07:11

Nice post.I think it would be best to have an actual CSS file that was included with the Editor. Then you could customize it appropriately.

SEO

June 17. 2009 17:38

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.

Pete

July 29. 2009 21:34

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>

Mark

August 15. 2009 05:00

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

atlix

October 20. 2009 07:01

FCKEditor has a configuration file where nearly every aspect of the utility is customizable (fckconfig.js).

t62

October 20. 2009 07:16

This file contains definitions for file paths, colors, fonts, and various other elements. In order to pre-fill colors / fonts / etc

t62

Add comment

Name*
E-mail* (Will show your Gravatar icon)
Captcha* Click to change captcha