How to get the selected image inside a contentEditable div

[thesmithman]

Hello,
I wrote a little rich text editor. Like many widgets of this type, it uses an iframe that contains a div element with contentEditable set to true. It works pretty well except for one thing: I would like users to be able to select an image and then click a button to edit the image's HTML attributes. I've waded through pages and pages of Google results but have not found a solution that works in W3C compliant browsers (although I did find some results that explain how to do this in Internet Explorer). I am able to get a text selection without any problem; but the same methods that work for text do not work for an image. I have tried the following:

iframe.contentWindow.getSelection();// returns an empty string.
 
iframe.contentWindow.getSelection().getRangeAt(0);// also returns an empty string
 
iframe.contentWindow.getRangeAt(0);// is not a function.
 
document.activeElement;// returns the object HTMLButtonElement
 
iframe.contentDocument.activeElement;// returns the object HTMLDivElement - the image's parent node.
 
iframe.contentWindow.activeElement;// is undefined.
 
iframe.contentDocument.selection;// is undefined.
 
iframe.contentWindow.selection;// is undefined.
 

As you can see I was kind of reaching by the end there. I'm all out of ideas now, so if anybody has tips or pointers I would be glad to hear them.

Thanks very much!

[acoder]

Perhaps you can use activeElement and use it to get at the image child (if you keep each image separate, so you know that if a parent element is selected, then it must be the image contained within which is selected).

Alternatively, you could link each image (this may not be appropriate depending on your requirements).

[thesmithman]

Hi acoder,
Thanks very much for your reply. I appreciate the thought; and you are correct that if there were only one image within my contentEditable div, then I could simply navigate down to the image from there. Unfortunately I have no way of knowing how many images will be contained inside the div, so I can't reliably predict that a particular image child node is necessarily the selected image.

What I wanted was a button that would add a class to any selected element, whether it is an image or a paragraph or whatever. I don't understand why getSelection returns a value when I have selected text, but returns an empty string when I have selected an image. A browser bug? (I also tried getSelection.parentNode, hoping that I could programmatically wrap all images in a p tag and then apply classes to that tag... no dice; it returns undefined.)

Sadly, I'm coming to the conclusion that this is not possible. I've already started on a workaround alternative.

I was glad to get some feedback though. Thanks again for your reply!

[lbried]

Stupid solution...but it works ! (tested both on IE and Firefox)

contentWindow.document.execCommand('CreateLink',false, 'http://imageselectionhack/');
  allLinks =   contentWindow.document.getElementsByTagName('A');
  for(i = 0; i < allLinks.length; i++)
   {
     if (allLinks[i].href == 'http://imageselectionhack/')
      {
        curObj = allLinks[i].firstChild;
        contentWindow.document.execCommand('Undo'); // undo link
        break;
      }
   }
 
if ((curObj) && (curObj.tagName=='IMG'))
{
  //do what you want to...
}