I have an odd case for contenteditable elements within HTML. We have a rich text editor that customers load pre-made templates(by us) into, and then can modify that template however they want (mostly).
Parts of our templates have been marked to not be directly editable, but can still be removed, etc. However, there seems to be an issue when one such element is the first element on a line (directly after a <br/> tag), and the user hits DEL on the line above. Because its contenteditable=false, the browser seems to delete not the <br/> but the entire non-editable span.
Sample HTML is like this
<div contenteditable=true>
<span>blah blah blah</span><br/>
<span contenteditable="false">You cant edit this value directly</span>
</div>
If the user puts their cursor after the blah blah blah, and hits DEL the entire next content editable is deleted, rather than the line break.
Is there any way, javascript or otherwise, to fix this behavior?
Ive fooled around with attempting to detect the cursor position(using rangy), and inserting temporary spaces, etc, but I cant seem to get it to have the desired behavior, which is just that the non-editable tag gets brought up to the previous line.
We have limited the use of the editor to Chrome only, so no need to worry about IE or FF.
Make each span
contenteditable, then the user won’t be able to delete the span you don’t want edited, and get rid of the div being editable.Here’s my version of the JSFiddle: http://jsfiddle.net/howderek/HgRsF/2/