This is a migrated thread and some comments may be shown as answers.

[Solved] RadEditor Content area is initially rendered as as single line.

6 Answers 325 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Tom Marsden asked on 11 Mar 2010, 04:56 PM

screen-1.JPG

screen-2.JPG

Greetings,
I'm trying to figure out a quirk I see with RadEditor. I've declared a RadEditor instance in the .aspx page, and when the page loads initially the editor content area is rendered as a single line ( although I have declared the width=680px and the height=500px ). When I hit F5 to refresh the page, the editor's content area is displayed as I would expect.

Any ideas on what could cause this? I have attached two screen shots so you can see how the editor content area is being rendered ( "screen_1.jpg" and "screen_2.jpg" ). The markup declaring the Editor is as follows, and is contained within an UpdatePanel.

Regards,
Tom

    
                                                                   <telerik:RadEditor   
        
                                                                         ID="EmailBodyEditor" runat="server" 
        
                                                                         Width="680px" 
        
                                                                         Height="500px"   
        
                                                                         AutoResizeHeight="true" 
        
                                                                         NewLineBr="true" 
        
                                                                         ToolBarMode="Default" 
        
                                                                         EnableResize="False"   
        
                                                                         ExternalDialogsPath="~/EditorDialogs/"   
        
                                                                         EditModes="Design, Preview, HTML" 
        
                                                                         OnClientCommandExecuting="OnClientCommandExecuting"   > 
        
                                                                    <CssFiles> 
        
                                                                        <telerik:EditorCssFile Value="fakeCssfile.css" /> 
        
                                                                    </CssFiles>                                                                     
        
                                                                    <Tools> 
        
                                                                       <telerik:EditorToolGroup> 
        
                                                                           <telerik:EditorTool Name="Bold" /> 
        
                                                                           <telerik:EditorTool Name="Italic" /> 
        
                                                                           <telerik:EditorTool Name="Underline" /> 
        
                                                                           <telerik:EditorTool Name="StrikeThrough" /> 
        
                                                                           <telerik:EditorTool Name="ForeColor" /> 
        
                                                                           <telerik:EditorTool Name="BackColor" /> 
        
                                                                           <telerik:EditorTool Name="InsertOrderedList" /> 
        
                                                                           <telerik:EditorTool Name="InsertUnorderedList" /> 
        
                                                                           <telerik:EditorTool Name="Indent" /> 
        
                                                                           <telerik:EditorTool Name="Outdent" /> 
        
                                                                           <telerik:EditorTool Name="JustifyLeft" /> 
        
                                                                           <telerik:EditorTool Name="JustifyCenter" /> 
        
                                                                           <telerik:EditorTool Name="JustifyRight" /> 
        
                                                                           <telerik:EditorTool Name="JustifyFull" /> 
        
                                                                        </telerik:EditorToolGroup> 
        
                                                                        <telerik:EditorToolGroup> 
        
                                                                           <telerik:EditorTool Name="FindAndReplace" /> 
        
                                                                           <telerik:EditorTool Name="ToggleScreenMode" /> 
        
                                                                           <telerik:EditorTool Name="InsertTable" /> 
        
                                                                           <telerik:EditorSeparator /> 
        
                                                                           <telerik:EditorTool Name="FontName" /> 
        
                                                                           <telerik:EditorTool Name="FontSize" /> 
        
                                                                           <telerik:EditorTool Name="LinkManager" /> 
        
                                                                           <telerik:EditorTool Name="ImageManager" /> 
        
                                                                           <telerik:EditorTool Name="AjaxSpellCheck" /> 
        
                                                                       </telerik:EditorToolGroup> 
        
                                                                    </Tools> 
        
                                                                    <ContextMenus> 
        
                                                                        <telerik:EditorContextMenu TagName="IMG">  
        
                                                                          <telerik:EditorTool Name="SetImageProperties" /> 
        
                                                                          <telerik:EditorTool Name="ImageMapDialog" /> 
        
                                                                        </telerik:EditorContextMenu> 
        
                                                                        <telerik:EditorContextMenu TagName="TABLE">  
        
                                                                          <telerik:EditorTool Name="ToggleTableBorder" /> 
        
                                                                          <telerik:EditorTool Name="SetTableProperties" /> 
        
                                                                          <telerik:EditorTool Name="DeleteTable" /> 
        
                                                                        </telerik:EditorContextMenu> 
        
                                                                        <telerik:EditorContextMenu TagName="TD">  
        
                                                                          <telerik:EditorTool Name="InsertRowAbove" /> 
        
                                                                          <telerik:EditorTool Name="InsertRowBelow" /> 
        
                                                                          <telerik:EditorTool Name="DeleteRow" /> 
        
                                                                          <telerik:EditorTool Name="InsertColumnLeft" /> 
        
                                                                          <telerik:EditorTool Name="InsertColumnRight" /> 
        
                                                                          <telerik:EditorTool Name="MergeColumns" /> 
        
                                                                          <telerik:EditorTool Name="MergeRows" /> 
        
                                                                          <telerik:EditorTool Name="SplitCell" /> 
        
                                                                          <telerik:EditorTool Name="DeleteCell" /> 
        
                                                                          <telerik:EditorTool Name="SetCellProperties" /> 
        
                                                                        </telerik:EditorContextMenu> 
        
                                                                        <telerik:EditorContextMenu TagName="A">  
        
                                                                          <telerik:EditorTool Name="SetLinkProperties" /> 
        
                                                                          <telerik:EditorTool Name="Unlink" /> 
        
                                                                        </telerik:EditorContextMenu> 
        
                                                                        <telerik:EditorContextMenu TagName="BODY">  
        
                                                                          <telerik:EditorTool Name="Cut" /> 
        
                                                                          <telerik:EditorTool Name="Copy" /> 
        
                                                                          <telerik:EditorTool Name="Paste" /> 
        
                                                                          <telerik:EditorTool Name="PasteFromWord" /> 
        
                                                                          <telerik:EditorTool Name="PastePlainText" /> 
        
                                                                          <telerik:EditorTool Name="PasteAsHtml" /> 
        
                                                                        </telerik:EditorContextMenu> 
        
                                                                    </ContextMenus> 
        
                                                                    <ImageManager ViewPaths="~/Documents/Images"   
        
                                                                                  UploadPaths="~/Documents/Images"   
        
                                                                                  DeletePaths="~/Documents/Images"   
        
                                                                                  MaxUploadFileSize="2097152" SearchPatterns="*.jpg, *.gif, *.jpeg, *.bmp" /> 
        
                                                                   </telerik:RadEditor>

6 Answers, 1 is accepted

Accepted

answered on 30 Apr 2010, 02:47 PM

I'm currently having the same problem as Tom, i took over this part of the project. We set AutoResizeHeight="false", but on occasion it still renders as one line that is extremely wide. Any refresh of the UpdatePanel or page will fix it, but I'd hate to have to automatically refresh the section of the page every time the user visits it. They may notice a flicker and since it doesn't happen all the time would add unnecessary load to the server. I have upgraded to the most recent version of telerik. I think it may only be happening in IE, but since i cant reliably reproduce it i'm not sure if it happens in FF or not.

EDIT: I checked in the latest version of FF the page initially loads the editor in an invisible panel, the first time the editor is shown it has this problem, but any refresh of the page or update panel will cause it to render correctly. IE 8 still only experiences this problem intermittently.

answered on 03 May 2010, 02:01 PM

Hi John,

My suggestions are to either:

register the external skins of RadEditor as shown in this KB article: Registering an external skin of RadEditor
or enable the SKIN CDN support and load the css skin files from a CDN server: http://www.telerik.com/help/aspnet-ajax/radstylesheetmanager-cdn-support.html.

This should fix the problem.

All the best,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 03 May 2010, 09:31 PM

Unfortunatly i have multiple sites using multiple skins/themes all sharing a common codebase. We control which skin and theme(our grouping of images and css styles) in the web.config file, i'd hate to have to copy out any skin we wanted to use, or duplicate it if different themes used the same skin. All the graphics and styling works except the width of the content area, on occasion in IE and every time the editor is initially made visible in FF 3.6+ it renders as a single line and very very wide.

Is there anyway i could just override the hieght/width settings on the content area so that it will always be the same size when it loads? We have another editor on our site that works fine, but it is never hidden. It is on its own page that opens in a rad window, it never has any issues loading. They wont let me do that with the one that is having problems.

John

answered on 04 May 2010, 09:43 AM

Hi John,

Did you tried the suggested CDN solution? When loading the controls skin files from a CDN server, you should not register manually any css link tags on the page with the control.

You can also set the editor's height using the editor.setSize client side method. You can set the height of the content area IFRAME element using editor.get_contentAreaElement().style.height = "500px";

You can execute the lines of code above in a setTimeout function with small delay when showing the editor in Firefox.

All the best,
Rumen
the Telerik team