Inserting Link Around Image in List Breaks Markup (Firefox Bug)

[mattzilla]

I've discovered that when inserting a link around an image in a list, the linked image will be removed from the <li> and placed just before the closing </ul> or </ol>.

This occurs in both Firefox 2.0.0.20 and 3.0.5.

Here's the steps to reproduce:

1. Open an editor in HTML mode (the demo one is fine: http://demos.telerik.com/aspnet-ajax/Editor/Examples/Default/DefaultCS.aspx)
2. Paste in the following code:
   

   <ul>
       <li><img src="http://www.izilla.com.au/img/logos/logo_izilla.png" alt="Izilla Logo" /></li>
       <li><img src="http://www.izilla.com.au/img/logos/cogdotgov.gif" alt="Cognition ECM Logo" /></li>
   </ul>
   

3. Switch to design view
4. Using the Link Manager, add a link around one of the images.

You'll end up with something like this:

<ul>
    <li></li>
    <li><img alt="Cognition ECM Logo" src="http://www.izilla.com.au/img/logos/cogdotgov.gif" /></li>
    <a href="http://www.izilla.com.au"><img alt="Izilla Logo" src="http://www.izilla.com.au/img/logos/logo_izilla.png" /></a></ul>

Regards

Matt

[Tervel]

Hello mattzilla,

Thank you reporting the problem. We were able to verify it. It happens because of the fact that the IMG tags are children of a LI tag. The problem has been fixed in our internal version, and the next Telerik.Web.UI update will work OK.

We were able to develop a workaround for the time being until the update comes out. Here it is:

            <telerik:radeditor runat="server" ID="RadEditor1"  OnClientPasteHtml="OnClientPasteHtml"/>

<script>
function OnClientPasteHtml(editor, args)
{
    var sel = editor.getSelectedElement();
    if (sel.tagName == "LI" || sel.parentNode.tagName == "LI")
    {
        editor.get_document().execCommand("Delete", null, false);
    }
}
</script>

I hope this helps.

Best wishes,
Tervel
the Telerik team

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