Deleting image with hyperlink leaves empty link behind (IE)

[Trevor]

One of our customers has reported a problem with the editor that is also reproducible on the Telerik editor demo page.

The problem occurs in IE but cannot be reproduced in FF or Chrome.

To reproduce, do the following using IE(9):

Switch the editor to HTML mode and replace the existing text with the following:

<a href="http://www.google.com"><img src="../../Img/editor.jpg" /></a>

Switch back to Design mode, click the image that appears in the editor, and hit the delete button on the keyboard.

Switch back to HTML view.

In Firefox, the editor is empty; In IE, the editor retains the following empty link:

<a href="http://www.google.com"></a>


Can you tell me how to achieve the Firefox behavior in IE?

Thanks,

[MasterChiefMasterChef]

Hi Trevor,

I'm sorry to hear that you're having issues with the RadEditor in IE9. If the issue is present in one of our demos then it will be put into a high-priority list of issues to fix. Unfortunately, a good amount of our browser-specific issues come out of internet explorer and most of the time the issue is on their part.

Telerik does everything it can to eliminate cross-browser problems and addresses IE9 and IE10 issues very frequently. Some of these issues have been documented here and here. 

If you would like to report a specific issue to be tracked you can do so with Telerik's Public Issue Tracker. Hopefully the team can address this issue either with updates to the controls or by bringing it to the attention of Microsoft's IE team.

Hopefully I could be of some help,
Master Chief

[Trevor]

Hi,

Thanks for the comment. However, what I'm looking for is a solution to the problem.

Assistance from Telerik support staff would be greatly appreciated.

Thanks,
Trevor.

[Rumen]

Hi,

The reported behavior is browser related and it could be handled with the following code:

<script type="text/javascript">
    var selectedElement = null;
    function OnClientSelectionChange(editor, args) {
        selectedElement = editor.getSelectedElement();
        if (selectedElement.tagName == "IMG" && selectedElement.parentNode.tagName == "A") {
            editor.selectElement(selectedElement.parentNode);
        }
    }
</script>
<telerik:radeditor runat="server" id="RadEditor1" OnClientSelectionChange="OnClientSelectionChange">
    <Content>
        Sample Content test <a href="http://www.telerik.com"><img alt="" src="http://demos.telerik.com/aspnet-ajax/Editor/Img/UserDir/Marketing/200x50-asp.net-featured.jpg" /></a> test
    </Content>
</telerik:radeditor>

Greetings,
Rumen
the Telerik team

[Trevor]

Hi Rumen,

Thanks for getting back to me.

The problem I found with this approach is that once the anchor is made the selected element, certain functions applicable to the image are no longer available (example, set absolute position).

I tried intercepting the delete keystroke in onkeydown, but in IE the selected element seems to be deleted from the editor before the event fires.

If you have any other ideas, please let me know,

Thanks,
Trevor.

[Rumen]

Hello,

This is how the browser works. The suggested approach just programmatically selects the parent element of the image which is a link. The editor tools are updated according to the selected element and it is expected when the selection is changed to A tag, the toolbar tools to be enabled for A tags only, but not for images.

Best regards,
Rumen
the Telerik team

[Trevor]

Understood. Unfortunately, this creates a difference in functionality between browsers.

In FF, when the user selects a hyper-linked image, they can correctly delete the image including the hyperlink; yet they still have access to the image functionality in the toolbar while the image is selected.

The suggested approach will just lead to our customers reporting another bug.

What I'm hoping for is to achieve the Firefox/Chrome functionality in IE.

Thanks,
Trevor.

[Rumen]

Hello,

In such case, you can attach to the onkeydown event and in IE ($telerik.isIE) to check whether the selected element is A tag and its parent is IMG to delete the A and the IMG tag when the user presses the Delete or BackSpace keys.

All the best,
Rumen
the Telerik team

[Trevor]

Hi Rumen,

I previously tried this approach. However, in IE the element is deleted before the onkeydown event handler runs.

The following video demonstrates the problem:  http://screencast.com/t/eCNTqWsmwwW

Here's my code:

    editor.attachEventHandler("onkeydown", function (e){
        alert(e.keyCode+'  '+editor.getSelectedElement());
    });

[Rumen]

Hi,

This is IE9 behavior, which does not occur in the older browser versions. You can render the page in IE8 mode and the key event will be fired before the image deletion:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

All the best,
Rumen
the Telerik team