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

Remove style attribute from img

1 Answer 173 Views
Editor
This is a migrated thread and some comments may be shown as answers.
saggiatorius
Top achievements
Rank 1
saggiatorius asked on 04 May 2010, 04:06 PM

Hi,
I need to replace style attribute from img with plain width and height attributes. I.e.:
YES: <img src="..." height="100" width="200"/>
NO:   <img style="height: 100px; width=200px;" src="..."/>

I tried the two solutions you proposed in different posts of this forum, but they don't work completely.
When the editor is in HTML View and OnClientSubmit is triggered, the function doesn't remove style attribute. 
When the editor is in Design View, everything is ok.

Why? Is there a workaround?
Following the two solutions proposed.

Thanks.



Solution 1:

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


Solution 2:

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

1 Answer, 1 is accepted

Sort by
0
Dobromir
Telerik team
answered on 07 May 2010, 03:17 PM
Hi,

I can offer you the following workarounds to this problem:
  1. Force RadEditor to switch to DesignMode upon submit, e.g.:
    function OnClientSubmit(editor, args)
    {
        //forces RadEditor to switch to DesignMode
        editor.set_mode(1);
        ......
    }
  2. Register the function as a custom DOM content filter and it will be executed onsubmit, e.g.:
    function OnClientLoad(editor, args)
    {
        editor.get_filtersManager().add(new MyFilter());
    }
    MyFilter = function()
    {
        MyFilter.initializeBase(this);
        this.set_isDom(true);
        this.set_enabled(true);
        this.set_name("RadEditor filter");
        this.set_description("RadEditor filter description");
    }
    MyFilter.prototype =
    {
        getHtmlContent: function(contentElement)
        {
            var images = contentElement.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.removeAttribute("style");
     
                image.setAttribute("width", width);
                image.setAttribute("height", height);
            }
     
            return contentElement;
        }
     
    }
    MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter);           

I hope this helps.


Kind regards,
Dobromir
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
saggiatorius
Top achievements
Rank 1
Answers by
Dobromir
Telerik team
Share this question
or