The two approaches give you solutions to decorate and customize the content area of RadEditor. However, both of them differ in concepts and behave differently. The following sections will provide a clear view of the logic behind their differences and will help you to decide which approach to use.
This approach is available only when ContentAreaMode is iframe. Using a content area rendered as a DIV element does not offer native capabilities to add external CSS files. You can find out how to decorate the DIV content area here—Decorating Div Content Area.
- Does not prevent styles from the main page from decorating the content area of RadEditor (i.e., any global styles that decorate your page will also decorate the editor's content area);
- All styles from the ContentAreaCssFile will not decorate the content in Preview mode;
- All styles form the ContentAreaCssFile file can be toggled via the Show/Hide Border tool;
- Only a single external CSS file can be used for custom stylization;
- Classes from the ContentAreaCssFile stylesheet will not be present in the Apply CSS Class dropdown;
- Its concept is to provide user-friendly styling for creating the content, which is not part of the styling of the place where the content will be used.
- Its concept is to let the end user see what their content will look like when used;
- Does not affect the built-in ContentAreaCssFile—preserves the designed user-friendly experience with content editing;
- Stops CSS style propagation and inheritence from the main page;
- Allows CSS files to be changed/added/removed dynamically;
- Can be configured with various techniques—via markup, XML file and from the code behind;
- Multiple CSS files can be injected into the content area;
- Custom styles cannot be toggled by the Show/Hide tool;
- Custom styles affect both Design and Preview modes.
If you only want to stop the page style inheritance, you do not need to have a special blank stylesheet. An empty value for the CssFile will have the same effect and will avoid the unnecessary request:
<telerik:RadEditor RenderMode="Lightweight" ID="RadEditor1" runat="server"> <CssFiles> <telerik:EditorCssFile Value="" /> </CssFiles> <Content> <p>para</p> </Content> </telerik:RadEditor>