Non editable span are not working properly in contenteditable. This page presents some solutions.
Some browsers add a
<BR> in empty paragraph. On the following example, iframeyou press enter
between the hand and the non editable content, an extra line is added :
A solution is to delete the
<br> tag, but it creates some other pooblems.
In fact, the problem comes from this tag
<span contenteditable='false'> which is
not considered as a visible character.
Another option is to wrap non editable
<span> inside editable
<span>. But if the span
is empty, the behavior is the same. So, one option is to add invisble characters
It works, but the invisible characters can be deleted.
Unfortunalty, if you play with the above JSfiddle, you'll see it's far from perfect.
If you have a better solution, please contact me ...