Picture size when sending mail with content from Editor Lite

[LEENAARDS JORG]

Hello,
I use the 'Editor Lite' as the 'source' field for a newsletter.
The user create the newsletter with a fancy design and picture (stored in a document library in the site).
If we try to change the picture size (by right clicking on the picture and changing the width and the height) everything works fine in the 'Editor Lite' but when I send the newsletter and the users open it in Outlook, all picture take their original size (same size as stored in the document library)

could you help me with this case?

Thanks a lot,
Jorg

[Stanimir]

Hi LEENAARDS,

The purpose RadEditor for MOSS is generating XHTML code. You can see what Html code is sent to the server by opening Html mode of the control. Please provide us with a sample of HTML code which is causing the issue, a step by step scenario of how to generate it and the HTML code, which you expect to be generated. If it is possible, I will advise you how to change the editor's output.


Best wishes,
Stanimir
the Telerik team

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

[LEENAARDS JORG]

Hello,
here is the sample HTML generated by  the Editor:

<td style="padding-bottom: 10px; line-height: 10pt; background-color: #f2f8e8; width: 250px; color: black; font-size: 13px; font-weight: 700;"><span style="font-family: verdana;"><img alt="" style="width: 100px; margin-bottom: 20px; height: 50px; vertical-align: middle; margin-right: 10px;" src="/SiteDirectory/newsletterportal/EgmontInfoPictures/replace_image.png" /></span></td>

But my problem is not inside the component!
If I save my item end go back into it later on, the pictures properties are the good ones.
My problem is when I use this HTML to send it in an outlook newsletter!
In this cas all my pictures properties are the properties of the 'original' image wich is store in a picture library.

Regards

[Stanimir]

Hi LEENAARDS,

RadEditor is designed to produce valid XHTML compliant content with inline styles instead of using the obsolete inline attributes, which are used by outlook.

One thing you can do is to disable the ConvertToXhtml filter. Review the following online help articles:
1. http://www.telerik.com/help/aspnet-ajax/set-properties-via-config-file.html.
2. http://www.telerik.com/help/aspnet-ajax/contentfilters.html.
What you need to do is modify the respective ConfigFile.xml or ListConfigFile.xml and use a comma separated list with all the filters that you want to be enabled for value of the ContentFilters property:

<property name="ContentFilters">RemoveScripts,MakeUrlsAbsolute,FixUlBoldItalic,FixEnclosingP,IECleanAnchors,MozEmStrong,ConvertFontToSpan,IndentHTMLContent</property>

Unfortunately 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.

I can suggest you to create your own custom content filter (Content Filters) that will replace the inline styles with the respective inline attributes supported by different e-mail clients.

1. Set the OnClientLoad property of the editor to OnClientLoad (Set Properties Via Config File).
2. Add the following javascript in the MOSSEditorTools.js, which is located in the Program Files\Common Files\Microsoft Shared\web server extensions\wpresources\RadEditorSharePoint\5.x.x.0__1f131a624888eeed\Resources folder:

function OnClientLoad(editor, args)
{
    editor.get_filtersManager().add(new ReplaceStylesWithAttributesFilter());
}

ReplaceStylesWithAttributesFilter = function()
{
    ReplaceStylesWithAttributesFilter.initializeBase(this);
    this.set_isDom(false);
    this.set_enabled(true);
    this.set_name("RadEditor filter");
    this.set_description("RadEditor filter description");
}
ReplaceStylesWithAttributesFilter.prototype =
{
    getHtmlContent: function(content)
    {
        var newContent = content;

        var div = document.createElement("div");
        div.innerHTML = newContent;
        var nodes = div.getElementsByTagName("IMG");
        for (i = 0; i < nodes.length; i++)
        {
            this.replaceStylesWithAttributes(nodes[i]);
        }

        nodes = div.getElementsByTagName("P");
        for (i = 0; i < nodes.length; i++)
        {
            this.replaceStylesWithAttributes(nodes[i]);
        }

        newContent = div.innerHTML;
        return newContent;
    },

    replaceStylesWithAttributes: function(node)
    {
        if (node)
        {
            var width = node.style.width;
            if (width)
            {
                node.setAttribute("width", width);
                node.style.width = "";
            }
            var height = node.style.height;
            if (height)
            {
                node.setAttribute("height", height);
                node.style.height = "";
            }

            if (node.tagName == "IMG")
            {
                var floatJSProperty = ($telerik.isIE) ? "styleFloat" : "cssFloat";
                var floatValue = node.style[floatJSProperty];
                if (floatValue)
                {
                    node.setAttribute("align", floatValue);
                    node.style[floatJSProperty] = "";
                }

                var vAlign = node.style.verticalAlign;
                if (vAlign)
                {
                    switch (vAlign)
                    {
                        case "text-bottom":
                            node.setAttribute("align", "bottom");
                            break;
                        case "middle":
                            node.setAttribute("align", "middle");
                            break;
                        case "top":
                            node.setAttribute("align", "top");
                            break;
                    }
                    node.style.verticalAlign = "";
                }
            }
            else if (node.style.textAlign)
            {
                node.setAttribute("align", node.style.textAlign);
                node.style.textAlign = "";
            }
        }
    }
}
ReplaceStylesWithAttributesFilter.registerClass('ReplaceStylesWithAttributesFilter', Telerik.Web.UI.Editor.Filter);

Greetings,
Stanimir
the Telerik team

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