Home

Tips & Tricks

How to make FCKeditor (almost) WYSIWYG

When using cutom theme, sometimes it is necessary to tell FCKeditor to use the correct style.
Let's use as example the marinelli theme.

By default, it is hard to create a page with FCKeditor: background color used by site and font color are too similar and it's very hard to read anything, text is aligned to the center:

Fortunately, there is a way to tell FCKeditor to appear just like we expect.

Take a look at the source of marinelli template (you may use Firefox with Firebug to do that). The ID of main element is called "primary". The class is named "singlepage".

All we need to do is to tell FCKeditor to use that styles:

  • Edit FCKeditor profile, in the "CSS section" choose use theme css
  • In modules/fckeditor/fckeditor.config.js, add the following: 
    FCKConfig.BodyId = "primary";
FCKConfig.BodyClass = "singlepage";
  • Now our body inside of the FCKeditor gets the right ID.
  • Well we still have the wrong background and text alignment. To fix this, add another line in fckeditor.config.js:
    FCKConfig.EditorAreaStyles = "body{background:#FFFFFF;text-align:left;}";
  • Remember to clear your browser's cache after applying changes to javascript files.

 

To see how FCKeditor works, add a comment on the first page.

Please use comments below only to leave your opinion and any other suggestions you might have on the subject.

Comments

Fri, 07/25/2008 - 12:03 — thalamus

Image Popup

A question; on the image dialog, there's a set of tabs that read off "Image Info", "Link", "Upload" and "Advanced". I know that the Link and Advanced tabs can be disabled, but is there a way of actually re-ordering the tabs themselves?

For instance, I'd like to order the tabs thus:

"Upload", "Image Info", "Links", "Advanced"

Once I know where these are set (and can be defined in the code - array?) then I can look at tweaking the settings - I'd like the Upload display to show first for users to be able to upload an image to the server - once it's uploaded, it then goes to the Image Info display as per normal.

Any ideas about this would be greatly appreciated... TIA

 

Mon, 07/14/2008 - 06:31 — Anonymous

Need to change toggle (Switch to plain) link at top of Text area

I would like to change the toggle('Switch to plain text editor','Switch to rich text editor');" link from Bottom to top of Text Area for Better display.  Can u help regarding that...

 

Thanks

RaamU

Wed, 06/11/2008 - 17:40 — Anonymous

thanks, awesome quick fix!

thanks, awesome quick fix!

Sun, 04/27/2008 - 21:53 — Anonymous

Worked perfectly

 Thank you for this...I mucked around a bit before turning to google and finding this site....

-Andre

Sat, 05/17/2008 - 14:18 — Anonymous

Great

This worked but I had one complication: the #primary id was being used by the primary menu. So the styles from the primary menu were being carried over into the fckeditor body. To fix, I used:

FCKConfig.BodyId = "primary-fckeditor";

Wed, 06/04/2008 - 20:23 — Anonymous

Great Hint

Excellent  . . I use Marinelli on of my sites. It worked - but only after I followed the second advise above as well.