Style tag

[Bala Sivakumar]

Hi,

We are using Rad Editor and creating articles which will be sent in a mail to all the users.
The articles are viewed the same way created in outlook 2003, but when it is viewed in oulook 2007 its looking very ugly as the style tags are no more recognized in oulook 2007 due to some changes as it doesn't have html engine etc...
one of the main problem is when we are changing the image properties like width, height editor stores in style tag, which is not recognized by oulook 2007 and showing the actual size.
so we want the properies of images to directly under the image tag instead of style.
is there any way to sort out this problem.
Please do reply ASAP, as its creating problems in our production.
Thanks in advance.

Regards,
Bala.

[Rumen]

Hi Bala,

What you can do is to disable the ConvertFontToSpan and ConvertToXhtml filters of RadEditor with

RadEditor1.DisableFilter(Telerik.Web.UI.EditorFilters.ConvertFontToSpan)
RadEditor1.DisableFilter(Telerik.Web.UI.EditorFilters.ConvertToXhtml)

Thus the editor will not convert the font tags to span tags with styles.

Another approach is to to run a simple server-side Replace() method and change all occurrences of style tags to their respective html attributes, before feeding the HTML from the editor to the database.

You can also do that on the client by implement your own custom content filter that will replace the style tags with the desired HTML attributes.


Best regards,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Mansoor]

Hi,

We are looking for a solution where in image tag's property representation is explicitly done i.e. <img height='100' width = '100' src= '...'> rather than <img src='..' style='Width:100; Height:100'>. Thanks for the help in advance.

Cheers,
Mansoor

[Rumen]

Hi Mansoor ,

You can easily manipulate the images in the content area by using the RadEditor client-side api. Here is an example demonstrating how to strip the style attribute and apply width and height attributes to the images on submit:

<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);
    }
}
</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" width=579></Content>
</telerik:radeditor>
<input type="submit" value="submit" />

Greetings,
Rumen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.