This is a migrated thread and some comments may be shown as answers.

align=left being changed to float:left

6 Answers 112 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Amey
Top achievements
Rank 1
Amey asked on 25 Jan 2010, 08:18 PM
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

6 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 26 Jan 2010, 09:35 AM
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.
0
saggiatorius
Top achievements
Rank 1
answered on 03 May 2010, 03:16 PM
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
0
Rumen
Telerik team
answered on 04 May 2010, 03:49 PM
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.
0
Chris
Top achievements
Rank 1
answered on 25 May 2010, 04:47 PM
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?
0
Chris
Top achievements
Rank 1
answered on 25 May 2010, 05:06 PM
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.
0
Rumen
Telerik team
answered on 26 May 2010, 03:27 PM
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 
      <a href="www.telerik.com">telerik</a> 
    </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.
Tags
Editor
Asked by
Amey
Top achievements
Rank 1
Answers by
Rumen
Telerik team
saggiatorius
Top achievements
Rank 1
Chris
Top achievements
Rank 1
Share this question
or