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

2 posts, 0 answers
  1. mattzilla
    mattzilla avatar
    29 posts
    Member since:
    Sep 2006

    Posted 21 Jan 2009 Link to this post

    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
        <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
  2. Tervel
    Admin
    Tervel avatar
    1337 posts

    Posted 27 Jan 2009 Link to this post

    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"nullfalse); 
        }   
    }  
    </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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top