Search code examples
javascripthtmlcontenteditable

Prevent contenteditable from styling text at cursor

How to prevent content editable from styling text at cursor position. By default it get style from closest node. But how to override this behavior?

<div contenteditable> Sometext <b>bold</b>|</div>

Example on JSFIddle If you set caret (vertical bar in example) on the end of text and start typing it will be bold all the time.

My goal is to highlight some words programmatically. Bu to prevent of style user input.

Thanks.

Solution

  • It's a common problem for which there is no easy solution. Inserting a zero-width space character (U+200B, for example) immediately after the <b> element is one (hacky) solution. See How to set caret/cursor position in a contenteditable div between two divs., for example.