HTML contenteditable with non-editable islands

Question

I have sort of browser based WYSIWYG editor where users can edit documents-templates.

Document-template is an ordinary html with some special \"merge code placeholde

Answer 1

Solution below -- with a small caveat. But first -- you guys are awesome!
I am not a JS or HTML expert, but I also did not know about jsfiddle.net. So reading your comments plus other online searches, and some testing on jsfiddle I created the following code that worked.

    Sample template with .
     editable 
      uneditable1 
     editable2 
     uneditable3  
     editable4 
     uneditable5 
< /div>

If you put this into jsfiddle on chrome you see that it works in chrome (and IE and FF but a bit differently), but there seems to be a small Caveat.

The caveat is what your key binding does with Backspace! In my case, when I select an uneditable phrase and press backspace in chrome, it seems to refresh, or do a "go to the last page"! I made the first two undeditbles red (left the last black) so that you can see what happens. I test it on jsfiddle in Chrome and in FF and in IE. All seems to have acted properly, give or take the backspace issue.

And I think here is the logic of how it works. The first Div is the top level parent, and it is contenteditable="false". So Everything under it should be un-editable. EXCEPT the children within it that have span contenteditble="true" they become editable. So you inherit from your parent, but then you can overwrite as a child.

I also put the tags readonly="true" UNSELECTABLE="ON" because I read about them some place. And it took more testing!!! NOTE PLEASE I had to take Font... outside of the span, or it would not work. But in IE it worked perfectly. The uneditables were whatever color I told them to be and no amount of single, dourble, or triple clicking would select the uneditbles in jsfiddle!!! :-) For Chrome single click did nothing, double click selected the uneditable, and with backspace it went a bit nuts! It seemed that would go to the previous page. With FF things were a bit crazier! Double click selected the uneditable and the editable before it! No idea why.

If someone can figure out and write about the issues with Chrome and FF that would be great. It would be nice to have double click or any number of fast clicks not to work in Chrome and FF too. Again I want to emphasize the span... seems to have to be next to the uneditables and font... outside of the span.

Hope this all makes sense.