RadEditor problem in IE browser

[Nidhi]

I have created a web page in which I have placed a rad editor and in that when I write 3-4 lines, select any particular line and right align it or change the paragraph style. Then all the lines get right align instead of that particular line in IE browser only. In your rad editor demo also, the same problem appears in the IE. So please suggest some solution for the same as soon as possible. Thanks.

 

[Rumen]

Hello Nidhi,

As in MS Word the indentation and alignment is applied to the whole paragraph. You can find information about this behavior and how to change it in this KB article: Applying indentation or alignment per line.

You can also see the following example made for the Right to Left and Left to Right commands which is similar to your scenario and modify it to fit your requirements: http://www.telerik.com/ClientsFiles/234242_rtland-rtlcustomtools.zip.

Best wishes,
Rumen
the Telerik team

[Nidhi]

Yes, its working, with NewLineBr property when set to false I am able to align a particular selected line and also can changed the paragraph style but when I applied this property and wirte one line and press enter to continue the text in next line then the next line starts after the one line space so its look like content in first line then one line space then next line content and so on. So please suggest some fix for this also.

[Rumen]

Hello Nidhi,

Can you please explain in more detail what the problem is and attach a screenshot of it and of the desired behavior?

If you would like to remove the default space between the paragraph tags, just put the following class

P

{

margin:0px;

}

on the page with RadEditor. Another approach is to put this class in a css file and load this file through the CssFiles property of RadEditor.


Best regards,
Rumen
the Telerik team

[Nidhi]

Thanks for trhe solution but my problem is still not fixed. Now when i write 3-4 lines in the rad editor and changed the alignment or paragraph style of particular line then in rad editor with NewLineBr property when set to false and in css using the following class 

P

{

margin:0px;

}

 I am able to align a particular selected line and also can changed the paragraph styles. Now its not showing the space but when I got the email its still showing one line space. I am attaching a screenshot of my email and of web page along with this post so that you will be able to understand what actualy i am facing problem.

[Rumen]

Hello Nidhi,

Thank you for the screenshots.

For some reason the following class

P  
{  
    margin:0px;  
}

is not applied to the email content. Can you please make sure that this class really exists in the email and set the !important rule after the margin value, e.g.

P  
{  
    margin:0px !important;  
}

Best regards,
Rumen
the Telerik team

[Nidhi]

Yes, you are right p class is not applied in the outlook email but applied in the web page when I save it. For eg: if I modify p class as follows:-
p
{
margin:0px !important;
background-color:Aqua;
}
then this class is applied to the web page but the email which I got is not showing this. I am attaching the screenshots of both web page and outlook email to make you understand. In aspx.cs, I have written the following code:-

 

SmtpClient

 

Client = new SmtpClient();

 

 

MailMessage mail = new MailMessage();

 

 

 

mail.Body =

RadEditor.Content; 

 

mail.IsBodyHtml =

true;
Do I have to write something  in the code along with this?

 

[Rumen]

Hi Nidhi,

Here are some suggestions that could help for your scenario:

1) Put the class in a CSS file and import the file using a link tag in the HTML of the e-mail.
2) or put the following tag at the end of the produced email HTML content:

<style type="text/css">
p
{
margin:0px !important;
background-color:Aqua;
}
</style>

3) or apply inline style="margin: 0px" attribute to all <p> tags in the content area when submitting the content.

Please, note that the reported behavior has nothing to do with RadEditor and you will experience it with a standard HTML page or another editor. It dials with the content supported by MS Word and Outlook Office explained in more details in the following MSDN articles: Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2).


Best regards,
Rumen
the Telerik team

[Nidhi]

Hi Rumen,
Thanks for the suggestion but my problem is still not fixed as in rad editor, it is applying this p class but how do I put this class in email? I can only put this class in Rad editor content which I am sending in email  but in the outlook  email how can I set this as earlier when I have not set the NewLineBr property to false then the email is coming in the right format and there was not one line space. So after applying this property only this problem is occuring.So suggest some other solution as the problem is still the same.Thanks.

[Rumen]

Hi Nidhi,

You can put the global p { margin:0px !important;  background-color:Aqua; } class in an css file and import this css file into the produced HTML of RadEditor using a link tag.

Another approach is to use the following code that will enable RadEditor to apply alignment per line without setting the NewLineBr property to false. Note that this is just an example and the code is not supported by Telerik:

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientCommandExecuting="OnClientCommandExecuting">
</telerik:RadEditor>
<script type="text/javascript">
    function OnClientCommandExecuting(editor, args) {
        if ($telerik.isIE && (args.get_commandName() == "JustifyLeft"
        || args.get_commandName() == "JustifyRight"
        || args.get_commandName() == "JustifyCenter"
        || args.get_commandName() == "JustifyNone"
        || args.get_commandName() == "JustifyFull")) {
            //cancels the default functionality
            args.set_cancel(true);

            var alignment = args.get_commandName().toLowerCase().replace("justify", "").replace("full", "justify");
            var output = "";
            var selectedElement = editor.getSelectedElement();
            //get current selection
            if (selectedElement.tagName == "DIV") {
                selectedElement.setAttribute("align", alignment);
            }
            else {
                var currentSelection = editor.getSelection().getRange();
                var wrapper = document.createElement("DIV");
                wrapper.innerHTML = currentSelection.htmlText;
                wrapper.setAttribute("align", alignment);
                output = $telerik.getOuterHtml(wrapper);
                editor.pasteHtml(output);
            }
        }
    }
</script>

All the best,
Rumen
the Telerik team

[Nidhi]

Thanks a lot this solution worked and my problem is fixed now. I have applied this javascript function and now no newline space is appearing in the email also now neither need to use NewLineBr property and nor need to use any css class to remove the line space.