Deleting image with hyperlink leaves empty link behind (IE)

10 posts, 0 answers
  1. Trevor
    Trevor avatar
    53 posts
    Member since:
    Jan 2012

    Posted 12 Feb 2013 Link to this post

    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,
  2. MasterChiefMasterChef
    MasterChiefMasterChef avatar
    152 posts
    Member since:
    Jan 2013

    Posted 13 Feb 2013 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Trevor
    Trevor avatar
    53 posts
    Member since:
    Jan 2012

    Posted 13 Feb 2013 Link to this post

    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.
  5. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 15 Feb 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Trevor
    Trevor avatar
    53 posts
    Member since:
    Jan 2012

    Posted 15 Feb 2013 Link to this post

    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.

  7. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 20 Feb 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. Trevor
    Trevor avatar
    53 posts
    Member since:
    Jan 2012

    Posted 20 Feb 2013 Link to this post

    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.
  9. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 22 Feb 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  10. Trevor
    Trevor avatar
    53 posts
    Member since:
    Jan 2012

    Posted 22 Feb 2013 Link to this post

    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());
        });
  11. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 26 Feb 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017