title: Able to remove non-editable text in CKEditor by using right and left scroll
body: <p>I have some text in CKEditor which should be editable and some text which should be non-editable. </p>
  
  <p>The non-editable text I am enclosing in a span as below.</p>
  
  <pre><code>&lt;span contenteditable="false" unselectable="on"&gt;Here is where my non-editable text goes&lt;/span&gt;
  </code></pre>
  
  <p>The editable text I am enclosing in a span as below.</p>
  
  <pre><code>&lt;span style="background-color:Yellow"&gt;$[insert Date]&lt;/span&gt;
  </code></pre>
  
  <p>Here we are using style background yellow to highlight the editable text in yellow to the user. </p>
  
  <p>I put my cursor within the editable text and move using the left or right arrow keys. Once I move outside the editable text area, I am able to remove even the non-editable text using backspace. </p>
  
  <p>The issue is that as soon as my cursor moves outside the editable text area the code isn't able to detect any key press due to which I am not able to restrict the backspace or delete.</p>
  
  <p>Does Range functionality help in this issue? If yes please help and give an example of where we can use the Range code.</p>