How can the FCKEditor edit view be matched with regular CSS style?

When using FCKEditor Version FCKEditorPlone2.2.1 or the new 2.3.2 with Plone 2.1 or 2.5, maybe you can recognize a difference in the overall typo scaling based on the global font size. Because th editor is running in an iframe, this iframe needs to know about the CSS styles of the site separately.

Have you changed fontBaseSize in base_properties?

The improved version 2.3.2 of FCKEditorPlone tries to guess the correct CSS-composition by trying to catch all CSS-components out of CSS-registry in portal_css. But there may be a small difference in sizes which is recognizable, if you change the value for fontBaseSize in base_properties in your site from the default of 69% to i.e. 62%.

Customize fck_ploneeditorarea.css

To match the sizes in detail you can modify fck_ploneeditorarea.css in the fckeditorplone skin folder add a font size to compensate the mismatch:

To match a fontBaseSize in base_properties of 62% add the red line to change the font-size to 70% :

body
{
   background:none;
   padding: 10px;
   margin: 0px;
   font-size: 70%;
}

It seems that FCKEditorPlone tries to estimate the default Plone font-size of 69%.

FCKEditorPlone2.2.1

If you are using the former version FCKEditorPlone2.2.1 (with Plone 2.1.x), this version could take only one CSS of the merged Files. ploneCustom.css was  the last item to be merged and stays a seperate file which was ignored. A workaround for this is:

• change the CSS-Media type of ploneCustom.css in the CSS-registry from "all" to "screen"
  
• move it up, close after generated.css
  

Because CSS-registry merges only CSS-components with same settings into one, ploneCustom.css was merged into the first block which was taken by FCKEditorPlone.