Problem in Text alignment in Editor Edit mode and View mode

[Vinodh Kumar]

Hi,

Problem in Text alignment in RAD Editor control. Text align left edit mode where HasPermission value is true and view mode where HasPermission value false text align.

Please help me how to solve this problem

[Rumen]

Hello Vinodh,

While an editable DIV element is part of the current HTML document, the editable IFRAME element contains its own document context and its own BODY element that does not inherit the styles from the page. The content area of RadEditor in edit mode is an editable IFRAME which has its own styles. You can find more information here: Setting Content Area Defaults.

When RadEditor is set in non-editable mode (Enabled="false") it is rendered as a simple DIV element which is part of the current page and inherits its css styles. That is why the content looks different in edit and non edit modes on your side.

To fix the problem you can wrap the editor in some container HTML element such as a DIV or a SPAN. Set the style attribute of the SPAN to the same style setting of RadEditor in edit mode.


<span style="font-family: Tahoma; font-size: 14px; color: red;">Sample Content Inside the DIV element

<telerik:RadEditor ID="RadEditor1"  runat="server" Enabled="false">
     <Content>
     Sample Content Inside the DIV element
     </Content>
</telerik:RadEditor>

</span>

You can also inherit the styles from some parent element on the page for example a DIV and copy the font styles from this parent element and apply them to the contents of the editor:

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<script type="text/javascript">
function CopyStylesToEditorHelper(element)
{
   if (element.currentStyle) // Handle IE
       return element.currentStyle;
   else // Handle Others
       return document.defaultView.getComputedStyle(element,null);
       return null;
}
function CopyStylesToEditor(editor, args)
{
   var parentDIV = $get("div");
   var theDocBody = editor.get_document().body;
   var IFrameCompStyle = CopyStylesToEditorHelper(parentDIV);

  if (IFrameCompStyle != null)
  {
      //alert(IFrameCompStyle.fontFamily +  IFrameCompStyle.fontSize +  IFrameCompStyle.color);
      theDocBody.style.fontFamily = IFrameCompStyle.fontFamily;
      theDocBody.style.fontSize = IFrameCompStyle.fontSize;
      theDocBody.style.fontWeight = IFrameCompStyle.fontWeight;
      theDocBody.style.lineHeight = IFrameCompStyle.lineHeight;
      theDocBody.style.color = IFrameCompStyle.color;
  }
}
</script>
<div id="div" style="font-size: 30px;font-family: Times New Roman;color: Red;">
    test
    <telerik:RadEditor ID="RadEditor1" onClientLoad="CopyStylesToEditor" runat="server">
        <content>test</content>
    </telerik:RadEditor>
</div>

If you are using RadEditor Classic (RadEditor for ASP.NET does not have a HasPermission property) then see the following help article: Setting a Default Font for the editor content in non-edit mode.

Best regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Vinodh Kumar]

Hi Rumen,

Thanks for your response.

I have the problem in the TEXT ALIGNMENT, not in font style. In my edit all the text align in left. But when comes to view mode (where HasPermission is false) all the text align to Center.

Please help me.
 
Regards,
Vinodh

[Rumen]

Hello Vinodh,

I think that you have a global body css class in the page with the editor that is applying text-align: center; to the content and when it is displayed outside of the editor (HasPermission=false) the center alignment is applied to it.

In order to fix the problem you can try one of the following two solutions:

• Set the style property of RadEditor to text-align: left; , e.g
  
  <rad:RadEditor id="RadEditor1" style="text-align: left;" runat="server">editor's content</rad:RadEditor>
• or wrap RadEditor in a DIV with style="text-align: left;", e.g.
  
   <div style="text-align: left;">
       <rad:RadEditor id="RadEditor1" runat="server">editor's content</rad:RadEditor>
  </div>   
  
  You can see the attached video demonstrating both solutions.

If you still experience any problems, please send a sample working project via the attachment functionality of the support ticketing system under your Client.net account. I will examine it and once I reproduce the problem I will provide a solution.

All the best,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Chakradhar Vemparala]

1- Spacing between parapgraph.
    a) I have some text in Notepad with paragraphs and the space between paragraph is 2 lines and when I copied the text from notepad or word pad and pasted in RAD Editor, I did not have any space between the parapgrahs, the new paragraph was just started on  a new line, no space seperator especially in IE.
When I started adding space between the paragraph from the editor, it added about 5 spaces viually but only 1 when we are done editing. Basically what you see IS NOT what you get.

Thanks,
Chakradhar

[Rumen]

Hi Chakradhar,

The problem is most likely due to some global P class on the page that has margin: 0, e.g.

P   {  margin:0px;   }  

To fix the problem set the CssFiles property to point to your own empty css file. Therefore the editor will not pick up the styles from the page and this will solve the issue.

You can find more information in this help article: Content Area Appearance Problems.

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.