I just spent a while working through this. Turned out to be simple in the end.
I DO like the FontFormat dropdown (the one that gives us H1, H2 etc) as I push my editors to use it, remove their color, font and style changers.
But I didn't like the order of it.


In normal content, we do NOT use pre, address or H1 (much), yet those are the ones that are visible when the dropdown is open. The useful ones start somewhere underneath the scroll.

So I went looking, and found these instructions for editing a handful of deep FCK source files
YUCK! and bad.

So I tried a few goes at setting it in the config file fckeditor.config.js where a few similar ones went. That just didn't work :-/ Yes, I hard-flushed the cache repeatedly.

Eventually (after experimenting with making my very own fckplugin to replicate fcktoolbarfontformatcombo.js) I tried something new. That worked.

To change the items in the FontFormat drop-down

Open the FCKEditor Drupal config page. Edit your chosen profile.
Under "Advanced Options - Custom javascript configuration: "

FCKConfig.FontFormats	= 'p;h2;h3;h4;h5;h6;pre;address;div' ;

Note - you CANNOT add arbitrary elements to the list, as the 'names' are set deep in the source, but you can delete from the list or re-order it.

My list is now nicer!
I really don't know why it wasn't working from the fckeditor.config.js. Could be something wrong inside FCKEditor.

Note, it IS theoretically possible to add to the element list by extending, eg
FCKConfig.CoreStyles.cite = { Element : 'cite'} ;
but it needs more investigation. You are better to use the custom style selector for that.

I would have added this to the handbooks, but I couldn't find an entry, and the developer site didn't have drupal.org sign-on or openID.
So this is a suggestion for the docs somewhere.



bsimon’s picture

I assumed the 'standard' way to do this would be:

'Copy sites/all/modules/fckeditor/fckeditor/fckstyles.xml inside your theme directory (sites/all/themes/[THEME]/fckstyles.xml) and adjust it to your needs.'

Because H1, H2 etc are included in fckstyles.xml

If it works, this might be a simpler way to achieve the same result.

But I haven't tried it - so maybe editing fckstyles.xml doesn't work for the old style elements like H1, H2 etc? (In which case, why are they in the file?)

FCKeditor custom styles config is a bit of a headache...

edit: on second thoughts, although this appears to be the method suggested in the docs, it isn't simpler, and anyway, I doubt it will work because style definitions (e.g. 'red title') deep in the code confusingly override anything the user adds in fckstyles.xml

dman’s picture

Yeah, that "red title" is a bitch
Um, yeah, there's 'styles' set in the fckstyles.xml. But if you look, they have the H1 etc commented out "because it's included in the 'format' bar"
So we have a FontFormat toolbar as well as a Style one. There's 2 of them.
The user-defined named styles in fckstyles.xml come into a different drop-down from the HTML basic ones.
When I get to tuning the css, I'll be using the Style selector as well, but for now I wanted to tidy the UI for the Format selector.

The reason we have two similar dropdowns may not be clear to users, but there is some logic to it I guess.

wwalc’s picture

Category: support » feature

Actually this setting is controlled by the FCKeditor profile in the "Cleanup and output" -> "Font formats" section, so the solution in fact is pretty simple. The problem is how to find it when you're looking for it at the first time.

So the question is: do you remember where did you look for this information at the beginning? Did you try to find this information somewhere inside of the FCKeditor module or did you start searching in google first?

I agree that the default value could be adjusted to Drupal, but I'm not so sure about removing H1 though.
How about:

FCKConfig.FontFormats = 'p;h1;h2;h3;h4;h5;h6;pre;address;div' ;
dman’s picture

Status: Active » Closed (works as designed)

It's in the output cleanup, when I wanted to change the input UI. :-}
The 'Editor Appearance' section of the UI is where I start for enabling toolbar features.
Modifying the exact buttons in in config.js, so I went there next.
Seeing as the "logical" heirarchy to me was :
"which toolbars" -> "Which buttons in the toolbar" -> "Which options in the utilities in the toolbar"
And that the Drupal UI stopped at step one, step two was editing a file by hand... I didn't expect to find step three in the UI again.

I looked at the XML config thing, but that wasn't appropriate, so I started tracing the code, and I looked through the FCK documentation, which led me to look into all the customization methods it suggested.

My reason for removing H1, H2 is simply that I've never seen a page that should have H1 embedded deep in the middle of its body copy, and the font preview is the one that takes up most space in the drop-down. I do NOT want my WYSIWYG editors placing H1s ... anywhere.
And under Drupal (although I don't think it's correct) H2 is the biggest title on the page - the page title. Anything a content editor is wanting to headline will be lower than that.

But anyway, if it can be changed like that, that's good to know. Dropping that address and pre out of sight is still an OK idea.
(I still think that configuring the options available in drop-downs is 'editor appearance' not 'clean up' :-P

babbage’s picture

Subscribing—want to come back here and think further about how to solve the "Red Heading" problem more permanently.

vivianspencer’s picture

For my setup I used the 'Style' element and a customised copy of the fckstyles.xml file in my themes directory, it worked perfectly for me except for the annoying 'Red Title' style showing up in the dropdown. I tried removing the following from fckconfig.js but that didn't work:

FCKConfig.CustomStyles =
	'Red Title'	: { Element : 'h3', Styles : { 'color' : 'Red' } }

What finally worked for me was adding the following to the fckeditor.config.js file:

FCKConfig.CustomStyles = '';
wwalc’s picture

Ahh correct, the "Red Title" custom style is really confusing.
I have added

FCKConfig.CustomStyles = {};

at the end of fckeditor.config.js to remove it.

schedal’s picture

Hello, I am in a similar boat, I want to edit the basic drop down to be much shorter. In my case: 'p','h2','h3'.

I've followed the above recommendation and added:

[code]FCKConfig.FontFormats = 'p;h2;h3;';[/code]

To the 'advanced' jscript window of the FCKEditor.

Only now I get a nasty jscript error: "The FCKConfig.CoreStyles[''] setting was not found. Please check the fckconfig.js file"

I tried going into the files:


And I removed the 'alert' statements, but I still get the message (?!?). I refreshed the site cache, still coming up.

I tried adding the FCKConfig.CustomStyles = {}; to the end of the fckeditor.config.js file, but this doesn't change anything...

Firstly, I hope I can resolve this issue, any ideas anyone?
Secondly: I might recommend making this task a bit less hardcore, as for all of my websites its necessary to edit the standard drop down and remove options; no sense declaring an h4 - h6 when its not defined in the CSS! And the h1 is already the title of the page, onyl want one per page as this is good SEO [google] practice... etc.

Thanks for your help.


schedal’s picture

Title: Not a bug - a tip for the docs - change the fckeditor style drop-down to remove ADDRESS and H1. » Making it easier to edit the style drop down
Component: Documentation » User interface
Category: feature » support
Status: Closed (works as designed) » Active

Ok, I was able to disable the alert, it then works ONCE. But if I log out and back in the fceditor is totally disabled...

There has to be an easier way to edit the standard drop down...?

Any help is appreciated,



pjsz’s picture

I would just like to find the "style" drop down. I use fckstyles.xml in my theme folder but the only drop downs I have are 3 of them for Font properties. Can someone help clarify about this Styles drop down in the toolbar? I tried adding "Styles" to the toolbar in the fckeditor.config.js but it was not valid. Thanks.

thelanyard’s picture

Try adding 'Style' to the toolbar in fckeditor.config.js.

Jorrit’s picture

Status: Active » Closed (fixed)

Closed because of inactivity

Stoob’s picture

@dman: Awesome post, thanks dude. I was also editing files in frustration when I found your post. Karma++ for you