Editor transforming align right into Float: right

[Dana Cobb]

We are an E.S.P. (Email Service Provider) and user the Editor in a web application where the clients can design their newsletters themselves before sending. So our potential rendering platforms also include email clients i.e. Outlook etc...
The following text comes from an un-named tech doc.
"The Float: right property does not render correctly in Outlook 2007 because Outlook 2007 uses the Word 2007 HTML parsing and rendering engine to display HTML emails. Float and position are just two of several CSS properties that the Word 2007 engine considers 'unknown properties."
Our Problem:

When a user tries to insert an image into a message and chooses align right. The editor inserts a style element into the image tag. "style= FLOAT: right;"

 

This also happens when a user copies an older message and tries to replace the image and align it.

As a matter of fact the editor will add "style= FLOAT: right;" just by selecting the image and clicking on the Alignment drop down box and choosing Right.
Original HTML Code:

<IMG style="WIDTH: 240px; HEIGHT: 180px" border=0 hspace=15 alt="" vspace=12 align=right src="http://pages.nxtbook.com/nxtbooks/newbay/dv0610/assets/icon.gif" complete="complete">

HTML code after aligning right:

<IMG style="BORDER-BOTTOM: 0px solid; BORDER-LEFT: 0px solid; FLOAT: right; BORDER-TOP: 0px solid; BORDER-RIGHT: 0px solid" hspace=15 vspace=12 src="http://pages.nxtbook.com/nxtbooks/newbay/dv0610/assets/icon.gif" complete="complete">

Is their a way to prevent the edit image dialog box from turning the align right dropdown into the float style tag?

Sincerely,

Dana Cobb

[Rumen]

Hello Dana,

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);

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.

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 different e-mail clients.

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:

Copy Code

<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" />

Here is another example demonstrating how to convert the float inline style with align attribute:

<script type="text/javascript">
function OnClientSubmit(editor)
{
    var images = editor.get_document().getElementsByTagName("IMG");
    var i = 0;

    for(i = 0; i < images.length; i++)
    {
        var align = images[i].style.styleFloat;
        var width = images[i].width;
        var height = images[i].height;

        if(align != null && align != "")
            images[i].setAttribute("align", align);

        if(width != null && width != "")
            images[i].setAttribute("width", width);

        if(height != null && height != "")
            images[i].setAttribute("height", height);

        images[i].removeAttribute("style");
    }
}
</script>

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

Here is another sample implementation of a custom content filter (fill free to modify the code so it will fit to your needs):

1. Set the OnClientLoad property of the editor to OnClientLoad.

2. Add the following javascript method :

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

3. Add the implementation of the 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);

I hope this helps.

Regards,
Rumen
the Telerik team

[B]

Hi,

I tried exactly the same steps above. However, the style="float:right" element was not getting replaced with the align element. In fact, editor.get_html() at the end of the code does not reflect the changed html. Please help.

[Dobromir]

Hi B,

In the Rumen's answer there are three different approaches to convert width, height and float CSS rules back as attributes to the images.

Actually, the first example does not affect float / align. So If you tried using this approach the align attribute will not be set. However, the recommended approach for such manipulations of the content is using custom content filter. I tried the custom content filter provided by Rumen and it is working as expected.

For your convenience I have attached a simple page implementing the custom content filter and this video demonstrates my test.

Sincerely yours,
Dobromir
the Telerik team