replace div not working for me

Your CKEDITOR.replace( 'editable' ) call is failing because there's no element in your page named 'editable', and anyway it doesn't seems that you want to start CKEditor by default.

You should have got an error in your javascript console (I've requested to make it a clear alert instead but I don't hold my breath about it) and as you haven't saw it I guess that there might be other errors in your page that you haven't noticed.

Also, remember that as you're replacing an HTML element and not a form element, you'll have to create some custom method to send the data back to the server.

If the sample doesn't work correctly for you then you should start from that point, don't try to modify it unless you understand what you are doing.

Yes, it seems that if you click on empty spaces the detection might not work, but you could debug that part of the sample script and create a better version

   // Find out the div that holds this element.
   var name;
   do
   {
      element = element.parentNode;
   }
   while ( element && ( name = element.nodeName.toLowerCase() ) && ( name != 'div' || element.className.indexOf( 'editable' ) == -1 ) && name != 'body' )


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

use firebug and check how the code is executed in that function when you double click in a place where you have problems

and that hover border is placed on the page

      div.editable:hover
      {
         border-color: black;
      }

, if you modify it it should get updated unless you have a very strange cache settings. So I wonder if you are modifying the wrong things, changing that color should be quite easy.