make a span within a contenteditable div uneditable

Question

I have a contenteditable div, which contains several spans with class dontEdit . Is there a way I can make the spans undeditable, while the rest of the div stays editable.

<div contenteditable=true>
    editable1 <span class="dontEdit">uneditable1</span> editable2
</div>

Please see the fiddle here : http://jsfiddle.net/LZpag/

Answer 1

Add contenteditable="false" to each <span> element. If you need to do it dynamically, you can use the contentEditable property in JavaScript. Note that the following won't work in IE <= 8 because those browsers do not support document.getElementsByClassName(), but that's easily worked around if necessary:

var spans = document.getElementsByClassName("dontEdit");
for (var i = 0, len = spans.length; i < len; ++i) {
    spans[i].contentEditable = "false";
}