Creating Email Content

[Albert Shenker]

I have been building a Content Management System which will be used for several of my clients, and I have been hoping to use RadEditor However, I have run into a really tough issue. For some of these clients, the majority of content this CMS system will be managing will be email content. RadEditor generates XHTML-compliant code which is great... if you're displaying content in a browser. However, Email clients don't always like XHTML code at this point and the content is often broken. For instance, images that have style declarations which specify their width/height will not be displayed properly in Outlook and other email clients. Images need to have their width/height attributes set in order to function correctly in email clients. I found a thread which discusses this exact problem at:

http://www.telerik.com/community/forums/aspnet-ajax/editor/remove-style-attribute-from-img.aspx

The solution provided (that of creating a custom filter) appears to have some issues. First off, when you insert an image from ImageManager, the custom filter works to rewrite the tag using attributes instead of style, however, the width/height it specifies is the width/height of the physical image, not the width/height specified in the Properties tab of the Image Manager. So, I can insert an image that has w/h of 300x200 and its attriubtes will be set correctly using the filter, but if I wanted to set the w/h to 600x400 in the Image Properties Dialog and/or tab in the Image Manager, the filter won't do this.

Apparently, the Image Properties dialog and Image Manager Properties Tab operate only on the style attribute of the img tag. This makes sense, sine you're tying to create and manipulate XHTML-compiant code, but of course, isn't particularly helpful in this scenario.

The solution above is also a bit problematic because I believe this style vs attributes issue applies to other types of elements, besides the img tag. Even if it were possible to overcome the properties issue I noted above, it would likely be very difficult to create an exhasutive filter that handles any and all tags and their attributes that are affected by this.

Anyhow, I'm hoping someone out there has created some sort of system that allows them to create content using Rad Editor that will work in email clients. Or, I'm hoping Telerik can provide a more workable and robust solution than the one in the link above. If not, I'm afraid I will have to forego using RadEdtior in my CMS system, which would be sad since I think the control is excellent otherwise.

[Mike Bridge]

We send out email created (in part) by the RadEditor, and we concluded that using the physical image size is indeed the best option because various email clients interpret the attributes and width/height differently.  We found that people were uploading massive images and virtually resizing them with the RadEditor but even though the images look OK in the preview, they show up at original size in Outlook for example. 

So to make it work in all clients, we strip out the CSS height/width and the height/width attributes and reset them both to the correct physical settings, but this is a compromise.  An ideal solution would be to replace the RadEditor Image Uploader with an interface which does a physical resizing of the image.

-Mike

[Albert Shenker]

I believe the Telerik ImageEditor indeed creates a resized image, however, obviously setting the size in the Properties tab of the ImageManager or in the ImageProperties dialog will not. In order to do what you have done, I would think you would have to disable, somehow, the resizing options in both the Image Manager and ImageProperties dialogs. This may be possible, but I'm not sure its ideal. In addition, I think the style vs attribute issue goes beyond image sizes into other image properties.

[Mike Bridge]

I think the most fundamental problem is that there's no way to disable the resizing box that appears when you select an image.   This is the one that everyone uses first, but there's no dependable way to turn it off in all browsers since it occurs on the browser side.

   http://www.telerik.com/community/forums/aspnet/editor/disable-image-resize.aspx

There's a KB article that says that you can, but a) it doesn't cover all situations---you can still select an image in different ways on different browsers (e.g. double-clicking) and b) you end up with other interface problems when you can't select an image (E.g. the user thinks something's broken because he can't delete or move his image).

  http://www.telerik.com/support/kb/aspnet-ajax/editor/disabling-image-resize-in-radeditor-classic-and-radeditor-for-asp-net-ajax.aspx

I don't think there's a way to disable virtual resizing in the RadEditor either, but this point is moot, since the user will almost always use the browser's resizing box.

The bottom line for us was that in order to get it rendering correctly in email clients, you need the width and height specified, and you also need those dimensions to match the physical properties.  We decided that having a slightly-broken UI was better than having unpleasant surprises like "The president opened the email and he says it's totally broken!!" (a real support call on this issue).

[Albert Shenker]

I guess I'll wait and see what telerik has to say. Unfortunately, my users fall into one of two groups. The first are advanced users who probably don't need an online CMS anyhow and can create the content in some offline applicaiton and just post it without an editor. The second are complete beginners, who will absolutely be likely to upload large digital camera images and expect their resizing to work. Yes, this can be mitigated to some extent by limiting the file size, but broken UIs don't mesh well with novice users. In the end, it would be tremendous if Teleirk has some readonly property called "EmailCompliantContent", which would take the standard XHTML Content and perform the necessary conversions. Of course, it would be great if email client vendors got their act in gear and settled on the XHTML standard for Rich Content Emails. But, I suppose that won't be happening any time soon.

[Rumen]

Hi guys,

We will consider providing a new content filter for Q2 2011 that will produce images with inline width and height attributes that MS Outlook can read and render. Let us know if you face any other problems with the contented produced by RadEditor and not rendered properly in your e-mail client so that we can research this scenario too. Here you can find the PITS Issue: Public URL.

In the meantime my suggestion is to execute the code that replaces the inline width and height style of the image tags with attributes in the OnClientSubmit event of RadEditor instead of using a custom content filter. The OnClientSubmit event is executed only when submitting the content while the content filter is also executed when switching between the Design and HTML modes.

Regards,
Rumen
the Telerik team

[Albert Shenker]

Can you provide an example of how to set the image tag attributes in the OnClientSubmit Event.. a tried the follwing and it didn't seem to work.

function OnClientSubmit(editor) {
            var images = editor.get_element().getElementsByTagName("IMG");
            for (i = 0; i < images.length; i++) {
                var image = images[i];
                var width = image.width ? image.width : image.style.width;
                var height = image.height ? image.height : image.style.height;
                image.setAttribute("width", width);
                image.setAttribute("height", height);
            }
        }

[Rumen]

Hi Albert,

If you use the IFRAME based content area of RadEditor (ContentAreaMode="Iframe") replace the

var images = editor.get_element().getElementsByTagName("IMG");

line with

var images = editor.get_document().getElementsByTagName("IMG");

e.g.

<telerik:RadEditor runat="server" ID="RadEditor1" OnClientSubmit="OnClientSubmit">
    <ImageManager ViewPaths="~/" />
</telerik:RadEditor>
<script type="text/javascript">
    function OnClientSubmit(editor) {
        var images = editor.get_document().getElementsByTagName("IMG");
        alert(images.length);
        for (i = 0; i < images.length; i++) {
            var image = images[i];
            var width = image.width ? image.width : image.style.width;
            var height = image.height ? image.height : image.style.height;
            image.setAttribute("width", width);
        }
    }
</script>
<asp:Button ID="Button1" runat="server" Text="Button" />

Best regards,
Rumen
the Telerik team

[Albert Shenker]

I made the change and now the images are found, however, when I read the editor.Content property server-side to save the content to a database, the changes to the image attributes aren't shown.

[Albert Shenker]

I think I found the issue and fixed it. However,  I notice that the OnClientSubmit event fires twice. What might cause this?

[Rumen]

Hi Albert,

The OnCliendSubmit's event code captures all possible ways for page submission and it is possible that it is fired twice. In such scenarios you can raise a flag and prevent the OnClientSubmit execution for a second time.

Best regards,
Rumen
the Telerik team