Prevent contenteditable from styling text at cursor

Question

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.

Not sure what you mean by "styling text". Would you mind posting a [jsfiddle](http://jsfiddle.net) or an image? — Dom, Dec 07 '14 at 19:04

score 1 · Accepted Answer · edited May 23 '17 at 12:28

1

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.

edited May 23 '17 at 12:28

Community

answered Dec 08 '14 at 09:58

Tim Down

1 Answers1