title: JavaScript - Add span to each letter written in contenteditable div
body: <p>I want to create script which add <code>&lt;span&gt;</code> to each letter of contenteditable div. For example:<br>
  If you write something in contenteditable <code>div</code>, in HTML code, you will see: </p>
  
  <pre><code>&lt;div contenteditable="true"&gt;
      SomeText
  &lt;/div&gt;
  </code></pre>
  
  <p>What I have to do to see something like this:  </p>
  
  <pre><code>&lt;div contenteditable="true"&gt;
      &lt;span&gt;S&lt;/span&gt;
      &lt;span&gt;o&lt;/span&gt;
      &lt;span&gt;m&lt;/span&gt;
      &lt;span&gt;e&lt;/span&gt;
      &lt;span&gt;T&lt;/span&gt;
      &lt;span&gt;e&lt;/span&gt;
      &lt;span&gt;x&lt;/span&gt;
      &lt;span&gt;t&lt;/span&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>I wrote some code (using <a href="https://github.com/timdown/rangy" rel="nofollow noreferrer" title="Rangy">Rangy</a>), but it doesn't work. You can see that code below, but I do not recommend it because it is to long and, as I said, doesn't work.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#Box').keypress(function() {
    setTimeout(function() {
      var selLenght = getCaretCharacterOffsetWithin(document.getElementById('Box'));
  
      var precedingChar = "",
        sel, range, precedingRange;
      sel = rangy.getSelection();
      range = sel.getRangeAt(0).cloneRange();
      range.setStart(document.getElementById('Box'), 0);
      sel.setSingleRange(range);
      sel.removeAllRanges();
      range.setStart(document.getElementById('Box'), selLenght - 21);
      sel.setSingleRange(range);
  /*
      var newElem = document.createElement('span');
      newElem.className = 'test';
      $(newElem).html(range.extractContents());
      range.insertNode(newElem);
      $('#MainBox &gt; span:empty').remove();
  */
      rangy.getSelection().move('character', 0);
    });
  });
  
  function getCaretCharacterOffsetWithin(element) {
      var caretOffset = 0;
      if (typeof window.getSelection != "undefined") {
          var range = window.getSelection().getRangeAt(0);
          var preCaretRange = range.cloneRange();
          preCaretRange.selectNodeContents(element);
          preCaretRange.setEnd(range.endContainer, range.endOffset);
          caretOffset = preCaretRange.toString().length;
      } else if (typeof document.selection != "undefined" &amp;&amp; document.selection.type != "Control") {
          var textRange = document.selection.createRange();
          var preCaretTextRange = document.body.createTextRange();
          preCaretTextRange.moveToElementText(element);
          preCaretTextRange.setEndPoint("EndToEnd", textRange);
          caretOffset = preCaretTextRange.text.length;
      }
      return caretOffset;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div{
    width: 400px;
    height: 200px;
    border: 1px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://github.com/timdown/rangy/blob/master/lib/rangy-core.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div contenteditable="true" id="Box"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can I do something like that in JavaScript and/or JQuery and/or free for commercial use external library?<br>
  Thanks for help.</p>