Looking for a reliable and affordable Domain Name Registrar? Look no further than Dotster. And for a limited time, we're able to offer our visitors a buy one domain name, get one free promotion. Click here
to take advantage of this offer.
Due to the popularity of our web development contract template, we're offering the contract, estimate, NDA and invoice templates for $199.50 $49.50 if you order by March 18. Click here to learn more.
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"):
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:
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.
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.
All Content © 2005 - 2010 Contract Web Development, Inc. All Rights Reserved. Privacy Policy | Terms of Use | Powered by Drupal
format in fckeditor
i want to remove completely the drop down of format in fckeditor
if anyone can help???
thanks!
Removing format drop-down in FCKEditor
Hi there,
No problem - this is fairly simple. For Drupal installations of FCKEditor, simply edit the fckeditor.config.js file. You'll notice the Toolbar sets, ie. FCKConfig.ToolbarSets["DrupalFull"], followed by the buttons it produces. Simply remove the 'FontFormat' button (second to last row).
You can accomplish the same thing in native (non-Drupal) installations of FCKEditor, by editing the fckconfig.js file. Or, you may edit this file and specify one of its toolbars within the Drupal FCKEditor settings.
No correlation
The Var C= statements weren't there in my IE and gecko files.
Var c in IE and gecko files
Try searching for h1 instead, and then find the occurrence following var c=. If you still can't find it, please post your FCKEditor version along with the path to the filenames you're editing.
What defines "h1"
Where do you define h1's font, weight, font size, etc.?
CSS
Use your stylesheet (CSS) to style the look and feel of your heading tags (ie. h1).
Which CSS file?
Can you specify which CSS file I should update? I tried different ones, and no new styles showed up in the "Format" drop-down. (I did clear my cache out, etc.)
Also - I followed the directions here to a T, but the styles that show up in the "Format" drop-down are:
- Normal
- Formatted
- Address
- Heading1
not
- Normal
- Heading1
- Heading2
- Heading3
However, the styles I have in my drop-down *look* like Heading1 Heading2 Heading3 - they just seem to have the wrong name.
Thank you!
Followup to Last Comment
I send a comment a couple hours ago; since then, I've figured out how to change the name - it was the edit in the en.js file. I overlooked that in your instructions above because I just read the first part of the instructions and thought it meant that I only had to do it if I was using a language *besides* English.
I think I have the stylesheet issue figured out, too.
Thank you SOOOO much for these directions! They are the only thing that worked - I tried all kinds of suggestions I found out there!!!
Stylesheet
Hi, can you share how you solved the stylesheet issue? Which CSS did you edit?
Possible for the dropdown formats to appear like the styles?
Hi. Awesome How To. It works like a charm. I was wondering if it's possible to actually get the dropdown format menu (ie. heading 1, heading 2, etc.) to look like the heading 1, heading 2 in the custom CSS when you click on the dropdown. Thanks in advance.
fckeditor.css
Hi there,
Great question. It is indeed possible. Simply edit your fck_editorarea.css file, and add (or replace) the styles for h1, h2, h3, a:link, strong, em, etc. - basically any styles you want replicated in the editor. The file is usually located at: example.com/modules/fckeditor/fckeditor/editor/css/fck_editorarea.css.
Cheers
- CWD Team
But what if I want to add another format to the drop-down?
How would I do that?