Remove style attribute from img

[saggiatorius]

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

[Dobromir]

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.