How To: Change Styles Within RadEditor Field Control

I'm currently using the free RadEditor Lite. It's a cross-browser alternative to the default rich-text editor in MOSS and WSS v3. For those who don't know this HTML editor, take a look at Telerik. It's a well made alternative with some pros and cons. In this post I'll highlight one of it's cons: Styling within the RadEditor can be hard. I'm not talking about styling the skin - but especially about the font, background, etc.

I thought this was an easy task by just changing some CSS classes et voila...Not! My aim was to change the styling from within my own stylesheets. The difficulty was due to fact that the RadEditor is rendered in an IFrame.

• My first attempt: override styles - with no result.
• My second attempt: access the IFrame and add a class on it with DOM manipulation - with no result
• Last but no least, my third attempt: access the IFrame, add a class on it and add an extra CSS Link reference in the head tag - with result.

Method: in detail

1. Modify the ConfigFile.xml
2. Write some javascript to access and manipulate the IFrame
3. Create a CSS Class / File
   

1. The RadEditor can be configured with the ConfigFile.xml (located in C:\Program Files\Common Files\microsoft shared\Web Server Extensions\wpresources\RadEditorSharePoint\4.5.4.0__1f131a624888eeed\RadControls\Editor)

Add an extra line: [property name="OnClientLoad"]OnClientLoad[/property]
This will tell the RadEditor to execute the OnClientLoad javascript function while loading the control.

2. Place the javascript function somewhere in a file - masterpage for instance:

(I referenced my stylesheet with document.styleSheet[x].href and added a CSS reference in my masterpage with $SPUrl: ~SiteCollection to get a relative path to the CSS file.)








3. Create a new CSS Class, named 'redEditBody', in your referenced CSS file. Now you're able to modify his styling.