[Solved] Image Manager XHTML Formatting Problems in Email

[Kevin Keyt]

Hi,

I've used the editor for an email program, but run into one problem with the images.  All mail clients (Gmail, Hotmail, Outlook, etc.) all have differences in handling CSS/XHTML and the way Q2 2009 formats the properties is creating a lot of inconsistency for us.  For example:  not all mail clients observe a style="margin:5px" but instead only want or recognize hspace or vspace.  Same goes for image scaling, especially when a message gets forwarded.  If it is a style="height:100px; width:100px;" some clients lose this information and the pictures revert back to original size.

Lastly, some mail clients do not like image alignment being handled as a style="float:left;" but it always works as align="left" across the board.

Obviously turning off ConvertToXHTML can allow someone with HTML knowledge to fix it at the HTML level, but the average user who builds the email doesn't always know HTML and just uses the image manager which always inserts with style="" for the properities.  If at all possible it would be nice to be able to leave ConvertToXHTML on as well, so that all non-image items are formatted as expected and to current standards, but if it has to be off we can try it that way.

Is there any way for us to work around this to be able to use the original properties such as hspace, vspace, align for images, since modern XHTML and standards isn't always accepted by the mail clients?

Thanks for any help and recommendations. :)

[Rumen]

Hi Kevin,

RadEditor is designed to produce valid XHTML compliant content with inline styles instead of using the obsolete inline attributes.

What you can do to achieve your scenario is to disable the ConvertToXhtml filter:
RadEditor1.DisableFilter(EditorFilters.ConvertToXhtml);

As you already noticed this will not solve the problem entirely. Even though you turn off the content filters, if you use the RadEditor's dialogues to import or modify elements they still will provide XHTML valid code which uses CSS properties.

Unfortunately it will be very hard and time consuming to write another filter that will convert all inline styles to HTML attributes. We are waiting for the Outlook 2010 release, which is slated for Q3 of the 2009 calendar year. If Outlook 2010 still does not support inline styles then we will definitely consider the implementation of the required content filter.

For now I can suggest you to create your own custom content filter that will replace the inline styles with the respective inline attributes supported by MS Outlook.

Here is an example demonstrating how to manipulate the images in the content area by using the RadEditor client-side api. The example shows how to strip the style attribute and apply width and height attributes to the images on submit:

<script type="text/javascript">
function OnClientSubmit(editor, args)
{
    var images = editor.get_document().getElementsByTagName("IMG");
    for (i=0; i<images.length; i++)
    {
       var image = images[i];
       var width = image.width;
       var height = image.height;
       image.removeAttribute("style");
       image.setAttribute("width", width);
       image.setAttribute("height", height);
    }

    alert(editor.get_html(true));

}
</script>

<telerik:radeditor runat="server" OnClientSubmit="OnClientSubmit" ID="RadEditor1">
    <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" />
    <Content><IMG style="WIDTH: 543px; HEIGHT: 287px" alt="" src="/editorQ2SP12008/Images/Deisy.jpg"></Content>
</telerik:radeditor>
<input type="submit" value="submit" />

All the best,
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.

[eyal]

Hi Rumen,

I have a similar case as Kevin and have used the code you provided to set the width and height attributes. Works great. In a similar way, I tried to set also the 'align', 'hspace', and 'vspace' attributes, but to no avail. The image tag is submitted without these attributes (both on IE and firefox). Are these attributes readonly? Is there another approach to add them other than manually writing them to the html image tag?

br,
eyal


UPDATE: The attributes does work on IE, except that they are case-sensitive and should be named 'Align', 'hSpace', and 'vSpace'. As for Firefox, I realized that the setAttribute() function works as well. It automatically inserts the attributes to the style attribute (as css properties). Wise. The question is why Outlook cannot understand this wisDOM?!