Telerik RadEditor Rendering issue

[Ian]

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. Any ideas on why some of the functions work but not other with this control?

Thanks,

-James.F

  <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>

[Ian]

I figured this out. 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.

[Rumen]

Hi James,

By default, RadEditor copies the styles from the parent page where it resides in order to display its content identically to the content on the parent page. In some scenarios this is not convenient for the end-user because the editor's background and text colors can appear unreadable.

The solution is setting the CssFiles property to point to an external css file and manually specify the classes that you want to load in the editor. By setting the CssFiles property you will prevent the editor to pick up the styles from the parent page, e.g.

<telerik:RadEditor ID="RadEditor1" Runat="server">
   <CssFiles>
       <telerik:EditorCssFile Value="~/EditorContentArea.css" />
   </CssFiles>
</telerik:RadEditor>

Sincerely,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Bo Su]

I myself get stuck in the same issue.

The numbered list/bulleted list behavior is not working properly. I tested the control on a demo and it behaves as I would expect. The following is how the behavior is not working as expected.

 

If I select the numbered list or bulleted list first and type in text, it is working as desired in that each item has a number besides it and it shows up correctly on the submission site.

 

If I type in text first and then select either the numbered list or bulleted list, it is only changing the first line of text. It does not bullet or number items listed below the first item.

 

Steps to reproduce:

1. Select the bulleted list function and then enter in the following text: test, text, test (this should be in a list and not in one row)

2. All three items should have been bulleted.

3. Select the bulleted list function again and items should be bulleted

4. Delete the text for test, text, test

5. Enter in the following text in a list: text, test, text

6. Highlight the text and select the bulleted list

7. It should have bulleted all items in the list. Currently, it is only bulleting the first item in the list.

8. Repeat the following steps above with numbered list and the outcome is the same.

Any advice or solutions?

Thanks

[Bo Su]

<telerik:RadEditor ID="RadEditor" runat="server" Width="100%" Height="500px" OnClientLoad="OnClientLoad">

<CssFiles>

<telerik:EditorCssFile Value="~/Style/EditorContentArea.css" />

</CssFiles>

<Content></Content>

</telerik:RadEditor>

With EditorContentArea.css is an empty CSS style sheet.

[Rumen]

Hi Bo,

To fix the problem our recommendation is to set the NewLineBr property to false and reduce the default margin between the paragraphs by putting the following global css class in external style.css file:

P 
{ 
    margin:0px; 
}  

loaded via the CssFiles property of RadEditor.

We will release tomorrow Q2 2009 SP2 where the editor will offer enhanced list creation mechanism. Please, test the new editor once the new RadControls for ASP.NET AJAX build becomes available.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.