Non editable span in contenteditable

Non editable span are not working properly in contenteditable. This page presents some solutions.

Carriage return and BR

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 :

Delete BR tag

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.

Wrap non editable span in editable span

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 () inside:

It works, but the invisible characters can be deleted.

Catching events

Another solution is to catch events from keyboard. It's a more complicated JavaScript solution.

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 ...

See also

• Flatten HTML
• How to get HTML content from Quill editor?
• WYSIWYG rich content editor. Part 1. The basics
• WYSIWYG rich content editor. Part 2. Check if bold
• How to insert MathJax formulas in Quill editor?

---