title: Changing paragraph selection style
body: <p>I'm kind of new to JQuery, and I'm in a very difficult position right now.
  I need to make the user free to write in a paragraph, and then change the text color as he wish, but only a selected text from his paragraph, like text editing in a browser.
  Here are my files : <br>
  <strong>HTML</strong></p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
     &lt;head&gt;
     &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-5589-1" /&gt;
     &lt;link rel="stylesheet" href="style_ext.css"&gt;
     &lt;title&gt;Editable Paragraph&lt;/title&gt;
     &lt;/head&gt;
     &lt;body&gt;
     &lt;p contenteditable="true" class="par" id="txt"&gt;This is an editable paragraph.&lt;/p&gt;
     &lt;center&gt;
             &lt;button type="button" id="redText"&gt;Color text in red&lt;/button&gt;
     &lt;/center&gt;
     &lt;center&gt;
             &lt;button type="button" id="blueText"&gt;Color text in blue&lt;/button&gt;
     &lt;/center&gt;
             &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
             &lt;script type="text/javascript" src="js/pushred.js"&gt;&lt;/script&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.par {
      width: 300px;
      height: 300px;
      border: 2px solid #A3A3A3
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$('#redText').click(function() {
      change_color('red');
  });
  
  
  $('#blueText').click(function() {
      change_color('blue');
  });
  
  function change_color(theColor) {
      //What should I put here to make any selected text change the color ?
  }
  </code></pre>
  
  <p><strong>Important information : i don't want the entire paragraph to change, only a segment, a selection, like in text editors</strong></p>