Fixing replace div strange behaviour

Hello,

We just switched from tinyMCE to CKEDITOR for end-user ease of use and I just wanted to share a little snippset of code I changed in the "Replace DIV" example bundled with CKEDITOR.

on line 44 in this example we have

function onDoubleClick( ev )
{
   // Get the element which fired the event. This is not necessarily the
   // element to which the event has been attached.
   var element = ev.target || ev.srcElement;

   // Find out the div that holds this element.
   element = element.parentNode;

   if ( element.nodeName.toLowerCase() == 'div'
       && ( element.className.indexOf( 'editable' ) != -1 ) )
      replaceDiv( element );
}

But this code does not always works. I don't know if it was on purpose but well, let's say you click on a part of the div where there is nothing (no text, no image, ...) then the code fails because element.parentNode is already a node deeper than the editable div.

Same if you have something like :

<div id="good-div" class="editable"><div id="wrong-div"><span>Some text here</span></div></div>

Because in the case we are not deep enough (element.parentNode is wrong-div).

To fix that here is what I wrote :

function onDoubleClick( ev )
{
   
   // Get the element which fired the event. This is not necessarily the
   // element to which the event has been attached.
   var element = ev.target || ev.srcElement;

   // Find out the div that holds this element.
   
   // Loops through parentNode till we find an editable div or breaks if we find the body.
   while(element.nodeName.toLowerCase() != 'body' && ( element.className.indexOf( 'editable' ) == -1))
      element = element.parentNode;

   if ( element.nodeName.toLowerCase() == 'div'
       && ( element.className.indexOf( 'editable' ) != -1 ) )
      replaceDiv( element );
}

I hope it will help.

Regards,
Benoît