editor.selectElement does not update the selection in Chrome

[Nick Jensen]

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"

[Ianko]

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

 

 

[Nick Jensen]

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>

[Ianko]

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