Make some keywords not editable in content editable div [closed]

Question

I added some content for div in html. And I made it as contenteditable="true".

The content has some keywords like [$FIRSTNAME$].

I want to make the keywords uneditable.

Please can any one help for fixing this problem?

Thanks..

Answer 1

Wrap the editable content with span and set contenteditable attribute to that

<div>
  <span contenteditable>fdfdfdfdf</span>
  [your keyword]
  <span contenteditable>fdfdfdfdf fdfdfdfdf</span>
</div>

Or wrap keyword by span, then you can avoid editable feature by setting contenteditable=false

<div contenteditable>
  fdfdfdfdf
  <span contenteditable=false>[your keyword]</span>
  fdfdfdfdf fdfdfdfdf
</div>

Update : In the above method it can be removed by selecting whole string. So I should prefer first method