Telerik RadEditor Rendering issue

Question

I've been working on a project where we are using the Telerik RadEditor control (version 2009.1.402.35). For the most part everything seems to work fine with it (i.e., bold, italics, color etc). What is an issue though is that the indent and list (bulleted and numbered) functions do not properly render on the screen while the user is editing the content. What is interesting about this is that when the indent or list button is clicked it does add the correct markup to the html.

The problem manifests in MSIE 6,7, 8 and FireFox 3 (the only ones i've tested so far). The editor is being used inside of a usercontrol that is running in the context of a SharePoint environment. My suspicions are that it is some type of a CSS conflict, or incompatibility with the way that i'm using it. Any ideas on why some of the functions work but not other with this control?

  <telerik:RadEditor ID="topicBody" Runat="server" Width="100%" height="300" >
    <Tools>
        <telerik:EditorToolGroup Tag="Top">
            <telerik:EditorTool Name="Bold" />
            <telerik:EditorTool name="Italic"/>
            <telerik:EditorTool name="Underline"/>  
            <telerik:EditorTool name="StrikeThrough"/>  
            <telerik:EditorSeparator Visible="true" />
            <telerik:EditorTool name="JustifyLeft"/>
            <telerik:EditorTool name="JustifyCenter"/>
            <telerik:EditorTool name="JustifyRight"/>
            <telerik:EditorTool name="JustifyFull"/>
            <telerik:EditorSeparator Visible="true" />
            <telerik:EditorTool name="InsertOrderedList"/>
            <telerik:EditorTool name="InsertUnorderedList"/>
            <telerik:EditorTool name="Outdent"/>
            <telerik:EditorTool name="Indent"/>
            <telerik:EditorSeparator Visible="true" />
            <telerik:EditorTool name="FontName"/>
            <telerik:EditorTool name="FontSize"/>
            <telerik:EditorTool name="ForeColor"/>
            <telerik:EditorTool name="BackColor"/>                  
        </telerik:EditorToolGroup>
        <telerik:EditorToolGroup Tag="Middle">
            <telerik:EditorTool name="Undo"/>
                <telerik:EditorTool name="Redo"/>   
                <telerik:EditorSeparator Visible="true" />              
            <telerik:EditorTool name="LinkManager"/>
            <telerik:EditorTool name="Unlink"/>
            <telerik:EditorSeparator Visible="true" />
            <telerik:EditorTool name="InsertTable"/>
            <telerik:EditorSeparator Visible="true" />   
                <telerik:EditorTool name="Cut"/>
            <telerik:EditorTool name="Copy"/>
                <telerik:EditorTool name="PasteAsHtml"/>
                <telerik:EditorTool name="PastePlainText"/>
                <telerik:EditorSeparator Visible="true" />
                <telerik:EditorTool name="Print"/>                                 
        </telerik:EditorToolGroup> 
    </Tools>
</telerik:RadEditor>

Answer 1

The problem on this turned out to be conflicting CSS. The main site CSS file had selectors that were matching BLOCKQUOTE, OL, UL, and LI, which interfered with the RadEditor. This is surprising given the fact that the RadEditor uses an IFrame to render the content that the user is editing. I don't believe it should be pulling css from the the container site. This seems like a bug in the control that it allows styles to bleed through to the Iframe which should be an island with no outside CSS.

Answer 2

how do we fix such an issue

Answer 3

Guys,

Please, see the following help article which provides guidance how to solve the problem: http://www.telerik.com/help/aspnet-ajax/editor-content-area-appearance-problems.html

Best regards, Rumen The Telerik team