align=left being changed to float:left

[Amey]

Hello,

When editing an image such that its align property is set to align="left", such as <img src="myimage.gid" align="left"/> and then switching to design view and then back to html view, the source is altered to:

<img src="myimage.gid" style="float:left"/>

Why is this happening?  I understand a float may be better, but in this case this is for HTML that will appear in an Email Newsletter, and many email clients do not support the float attribute.

Thanks

Christian

[Rumen]

Hi Christian ,

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

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.

[saggiatorius]

I tried your two solutions.
They don't work at 100%.
When the editor is in HTML View, and you make trigger OnClientSubmit, it doesn't remove style attributes.
Why? Is there a workaround?

Thanks

[Rumen]

Hi,

If the editor is put in HTML mode then make a check and set it in Design mode before submitting the content, e.g.

<script type="text/javascript">
    function OnClientSubmit(editor, args) {
        if (editor.get_mode() == 2) editor.set_mode(1);
        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>

Sincerely yours,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Chris]

Rumen,

I am having the same issue, and tried the work-around, which does work for the align/float issues, but the editor is not applying the width and height attributes to the <img> tag, so the image.width and image.height are null. What do I have to do to get the editor to add the height / width props to the <img> tags?

[Chris]

Rumen, I found this post http://www.telerik.com/community/forums/aspnet-ajax/editor/image-height-and-width-attributes.aspx, but that doesn't help me. We have an app that is used by 10s of thousands of clients, and I cannot ask them to fake resizing the image with the drag handles just so the image props can be written to the <img> tag(s). I must have the height / width attributes on the <img> because the content is being used in Email Marketing newsletters, and particularly in Outlook 2007, images w/o these dimensions cause the newsletter layout to breakdown. Please provide me with some way to ensure that the img width & height properties can be automatically added to the <img> tags without having to resort to using the image resize handles. Thanks.

[Rumen]

Hello Chris,

I am not sure why the code does not work on your side, but you can directly disable the image resizing in the content area by following the instructions in this KB article:

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

    editor.attachEventHandler("oncontrolselect", function()
    {
        //Check if image
        window.setTimeout(function()
        {
             var selElem = editor.getSelection().getParentElement();
             if (selElem.tagName == "IMG")
             {
                selElem.setAttribute("unselectable","on");
             }
        }, 0);
    });
}
</script>
<br /><br /><br />
<telerik:RadEditor ID="RadEditor1"
    OnClientLoad="OnClientLoad" ToolbarMode="showOnFocus"
    runat="server"  Width="400" Height="400">
    <Content>test
      <img src="http://www.telerik.com/DEMOS/ASPNET/RadControls/Editor/Skins/Default/buttons/CustomDialog.gif"/>
      <a href="www.telerik.com">telerik</a>
      <img src="http://www.telerik.com/DEMOS/ASPNET/RadControls/Editor/Skins/Default/buttons/CustomDialog.gif"/>
    </Content>
</telerik:RadEditor>

Sincerely yours,
Rumen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.