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

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

1 Answer 25 Views
Editor
This is a migrated thread and some comments may be shown as answers.
mattzilla
Top achievements
Rank 1
mattzilla asked on 21 Jan 2009, 10:38 PM
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

1 Answer, 1 is accepted

Sort by
0
Tervel
Telerik team
answered on 27 Jan 2009, 05:47 PM
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.
Tags
Editor
Asked by
mattzilla
Top achievements
Rank 1
Answers by
Tervel
Telerik team
Share this question
or