title: ContentEditable is not working, when type text in the ContentEditable
body: <p>I am trying to type text in the ContentEditable div(not in last row).While typing cursor moves to last line.</p>
  
  <p><a href="https://i.stack.imgur.com/NxuRW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NxuRW.png" alt="https://i.stack.imgur.com/NxuRW.png"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var changed,
      lastValue = '',
      div = $('#ce'),
      words = ['oele', 'geel', 'politie', 'foo bar'];
  
  function markWords() {
      var html = div.html().replace(/&lt;\/?strong&gt;/gi, ''),
          text = html.replace(/&lt;[^&gt;]+&gt;/g, ' ').replace(/\s+/g, ' '),
          exp;
      $.each(words, function(i, word) {
          exp = new RegExp('\\b(' + word + ')\\b', 'gi');
          html = html.replace(exp, function(m) {
  console.log('WORD MATCH:', m);
              return '&lt;strong&gt;' + m + '&lt;/strong&gt;';
          });
      });
      //html = html.replace('&amp;nbsp;', ' ').replace(/\s+/g, ' ');
  console.log('HTML:', html);
  console.log('----');
      div.html(html);
  }
  
  setInterval(function() {
      var html = div.html();
      if ( lastValue != html &amp;&amp; html ) {
  //console.log(lastValue);
  //console.log(html);
  //console.log('----');
          lastValue = html;
          markWords();
          setEndOfContenteditable(div[0]);
      }
  }, 500);
  
  function setEndOfContenteditable(contentEditableElement)
  {
      var range,selection;
      if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
      {
          range = document.createRange();//Create a range (a range is a like the selection but invisible)
          range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range
          range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
          selection = window.getSelection();//get the selection object (allows you to change selection)
          selection.removeAllRanges();//remove any selections already made
          selection.addRange(range);//make the range you have just created the visible selection
      }
      else if(document.selection)//IE 8 and lower
      { 
          range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
          range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range
          range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
          range.select();//Select the range (make it the visible selection
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>[contenteditable] {
      padding: 10px;
      border: dotted 1px #aaa;
  }
  [contenteditable] &gt; div {
      margin: 10px 0;
  }
  [contenteditable] strong {
      font-weight: normal;
      background: red;
      color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="ce" contenteditable&gt;I love me some foo bar and shit.&lt;/div&gt;
  
  &lt;p&gt;&lt;a href="javascript:void(0);" onclick="$('#ce').html('');"&gt;clear&lt;/a&gt;&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>