Make some keywords not removable in content editable div

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

span[contenteditable="false"] {
  color: red;
}

<!-- language: lang-html -->

<div contenteditable="true" id="editableDiv">
  Editable Span <span contenteditable="false">Not Editable Span</span> Editable Span
</div>

<!-- end snippet -->

Looking at this question, I am able to make some keywords not editable in content editable. However, when I go on editable part of the span and I press backspace or del button, I can remove the not editable span. I tried with some JS but I did not succeed to make it work. So the question is different because I would like to avoid to be able to delete the not editable span

I just found out there is contenteditable code. maybe what you mean is like this

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

span[contenteditable="false"] {
  color: red;
}

span[contenteditable="true"] {
outline: none
}

<!-- language: lang-html -->

<div id="editableDiv">
   <span contenteditable="true">Editable Span</span> 
   <span contenteditable="false">Not Editable Span</span>     
   <span contenteditable="true">Editable Span</span> 
</div>

<!-- end snippet -->