editor.selectElement does not update the selection in Chrome

4 posts, 0 answers
  1. Nick Jensen
    Nick Jensen avatar
    17 posts
    Member since:
    Jun 2006

    Posted 28 Mar 2014 Link to this post

    When I have an image surrounded by a link (<a ...><img ... /></a>), clicking on the image only selects the image. I have certain circumstances where I need to include the link in the selection, so I have tried to use this javascript. It works fine in Firefox (and not at all in IE because IE selection is lost when there is no text selected, see this old thread), but in Chrome the selection is not changed to include the <a> link.

    console.log(editor.getSelectedElement().tagName); // "IMG"
    var element = editor.getSelectedElement();
    if (element.tagName == "IMG" && element.parentNode && element.parentNode.tagName == "A") {
       console.log(element.parentNode.tagName); // "A"
       editor.selectElement(element.parentNode.parentNode); // does nothing
    }
    console.log(editor.getSelectedElement().tagName); // "IMG"
  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 28 Mar 2014 Link to this post

    Hello Nick,

    Unfortunately under Chrome the selection of the anchor elements behaves by selecting the inner text node. What actually happens is that when the anchor is selected the logic selects the inner Image again.

    Currently I am unable to provide a possible approach to achieve the desired functionality for Chrome. It would be better if you could provide details about the problems by that, so that I could possibly provide an alternative approach to the above one. 

    Regards,
    Ianko
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nick Jensen
    Nick Jensen avatar
    17 posts
    Member since:
    Jun 2006

    Posted 30 Mar 2014 in reply to Ianko Link to this post

    Thanks for your reply Ianko,

    The issue is that I need to insert custom tags around the link. It seems that when I pasteHTML when the IMG is selected, the A is actually deleted. I have made a workaround (hack) by storing the html of the link, and then pasting it back in along with my custom tags:

    console.log(editor.getSelectedElement().tagName); // "IMG"
    var element = editor.getSelectedElement();
    var __geckoSelectedLink = "", __geckoClose = "";
    if (element.tagName == "IMG" && element.parentNode && element.parentNode.tagName == "A") {
       console.log(element.parentNode.tagName); // "A"
       editor.selectElement(element.parentNode); // does nothing in Chrome
       element = editor.getSelectedElement();
       if (element.tagName == "IMG") { // Chrome hack
          var outer = element.parentNode.outerHTML;
          // Save link open tag "<a ...>"
          __geckoSelectedLink = outer.substr(0, outer.indexOf('>') + 1);
          __geckoClose = "</a>";
       }
    }
     
    ...
     
    editor.pageHtml(
       customStartTag +                     // <custom ...>
          __geckoSelectedLink +            //    <a href=...>
             editor.getSelectionHtml() +  //       <img src=...>
          __geckoClose +                   //    </a>
       customEndTag);                       // </custom>
  5. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 01 Apr 2014 Link to this post

    Hello Nick,

    The provided solution should do the job. On my end it looks like it should retrieve the correct elements when images are inside links.

    Regards,
    Ianko
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
Back to Top