Changing FCKEditor's Font Format List

Customizing FCKEditor's Font Format Menu

Having trouble adding/ removing items to FCKEditor's FontFormat menu?  While it's quite simple to adjust and changes styles in FCKEditor (simply update fckstyles.xml in the root directory or create your own styles file and reference it in fckconfig.js under FCKConfig.StylesXmlPath). 

The Font Format menu is an entirely different story.  Here's how to update it in a nutshell (note that this example removes all items save "Normal", "Heading 1", "Heading 2", and "Heading 3"):

FCKEditor versions 2.5 and lower

Simply edit the following files and make the following changes:

root/fckconfig.js: Search for FCKConfig.FontFormats and change the line to:

FCKConfig.FontFormats = 'p;h1;h2;h3' ;

root/editor/js/fckeditorcode_gecko.js: Gecko (Mozilla/ Firefox) configuration: search for "h1" and change the "var C=" statement to the following (remember to update the index numbers as well):

var C={p:B[0],h1:B[1],h2:B[2],h3:B[3]};

root/editor/js/fckeditorcode_ie.js:  Internet Explorer configuration: same thing as above:

var C={p:B[0],h1:B[1],h2:B[2],h3:B[3]};

root/editor/lang/en.js: If you're using another language besides US-English, edit that language file as well.  Search for "FontFormats" and reduce the line to the following:

FontFormats : "Normal;Heading 1;Heading 2;Heading 3",

Voila :)  you've customized the Font Format drop-down to only include the normal (paragraph) element and three headings.  You'll need to clear your cache and Ctrl+F5 the page to see the change.

If you're using FCKEditor 2.6 or newer, you'll need to also make the following change to avoid seeing cryptic "_fck_div" type lines in your listing:

FCKEditor versions 2.6 and higher

Make the above changes plus the following:

root/editor/_source/classes/fcktoolbarfontformatcombo.js: Locate the following line and change it, making sure to leave the index numbers as they were:

var oNames = {
p : aNames[0],
h1 : aNames[3],
h2 : aNames[4],
h3 : aNames[5])
} ;

root/fckconfig.js: Find the "Basic Block Styles" line and truncate it to:

// Basic Block Styles (Font Format Combo).
'p'                : { Element : 'p' },
'h1'            : { Element : 'h1' },
'h2'            : { Element : 'h2' },
'h3'            : { Element : 'h3' },

Note that if you stop now you'll experience a slew of JavaScript errors.  To avoid these, you'll need to remove the offending JavaScript alert from the following files:

root/editor/js/fckeditorcode_gecko.js:
root/editor/js/fckeditorcode_ie.js:

else alert("The FCKConfig.CoreStyles['"+E+"'] setting was not found. Please check the fckconfig.js file");

This will take care of the JavaScript error and your Font Format listing should load as intended.

Getting Your Editor Window to Show Your Styles

In order to have your editor window reflect the look of your styles, you'll need to add them to your fck_editorarea.css file. You can access the file at example.com/modules/fckeditor/fckeditor/editor/css/fck_editorarea.css. 

You'll then want to and/ replace the styles for your headings (h1, h2, h3) and other style declarations, such as links (a:link, a:visited, a:hover), font styles (strong, em), etc. - basically any styles you want replicated in the editor. You'll most likely need to clear your browser's cache and force refresh the page in edit mode to see the changes.