title: Get all text before SelectionStart and after SelectionEnd
body: <p>I am creating a text editor from scratch. </p>
  
  <p><strong>code for getting bold</strong></p>
  
  <pre><code>$('#bold').click(function(){
  
              var start = window.getSelection().toString();
  
              var bolded = '&lt;b&gt;' + start + '&lt;/b&gt;';
              var cursorPositionBegin = $('#TextEditor').prop("selectionStart");
              var cursorPositionEnd = $('#TextEditor').prop("selectionEnd");
  // to check 
                  alert(bolded);
              })  
  </code></pre>
  
  <p><strong>HTML CODE</strong></p>
  
  <pre><code>&lt;table width="50%"&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;div&gt;
                  &lt;div&gt;
                      &lt;span&gt;&lt;input type=button value="B" id="bold"&gt;&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div contenteditable="true"&gt;
                      &lt;textarea cols="47" rows="23" placeholder="editor" id="TextEditor"&gt;&lt;/textarea&gt;
                  &lt;/div&gt;
              &lt;/div&gt;  
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>When I click #bold for a selected set of characters I want to add <b>characters</b> in the #TextEditor. I thought maybe getting the beginning and ending position of cursor could help break up and join the begin and end together along with the <b>characters</b> to form what I require.</p>
  
  <p>I also use jQuery</p>
  
  <p>[update 1]
  Or is there an alternate method to do what I require?
  [update 2]
  added  <code>contenteditable="true"</code> to div where #TextEditor id placed</p>
  
  <p>Your help would be appreciated.</p>