title: Simple Rich Text Editor Using Textarea
body: <p>I'm making a simple rich text editor using textarea for editor , i simply paste <code>&lt;tag&gt;&lt;tag/&gt;</code> for bold , italic &amp; underline in textarea everything working fine, problem is that i cannot understand how to insert ordered list &amp; unordered list using this script.<br><br>
  Below Is My Code.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  
  &lt;style&gt;
  #my_textarea{
      width:300px;
      height:150px;
      border:thin solid #000;
      color:#000;
      padding:10px;
      min-height:150px;
      min-width:300px;
      max-height:150px;
      max-width:300px;
  }
  #preview{
      width:300px;
      height:150px;
      border:thin solid #000;
      color:#000;
      padding:10px;
      min-height:150px;
      min-width:300px;
      max-height:150px;
      max-width:300px;
  }
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt; 
  
  function formatText(tag) {
     var myTextArea = document.getElementById('my_textarea');
     var myTextAreaValue = myTextArea.value;
     var selected_txt = myTextAreaValue.substring(myTextArea.selectionStart, myTextArea.selectionEnd);
     var before_txt = myTextAreaValue.substring(0, myTextArea.selectionStart);
     var after_txt = myTextAreaValue.substring(myTextArea.selectionEnd, myTextAreaValue.length);
     myTextArea.value = before_txt + '&lt;' + tag + '&gt;' + selected_txt + '&lt;/' + tag + '&gt;' + after_txt;
  }
  function preview() {
      var textbox , view ;
      textbox = document.getElementById('my_textarea');
      view = document.getElementById("preview");
      view.innerHTML = textbox.value
  }
  
  function onload(){
      var textarea = document.getElementById("my_textarea");
      textarea.onkeypress = function(e){
          if( e.which === 13)
          {
              this.value += "&lt;br&gt;";
          }
      }
  }
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body onLoad="onload();"&gt;
  &lt;input type="button" value="bold" onClick="formatText ('b');" /&gt; 
  &lt;input type="button" value="italic" onClick="formatText ('i');" /&gt; 
  &lt;input type="button" value="underline" onClick="formatText ('u');" /&gt;&lt;br&gt;&lt;br&gt;
  &lt;textarea name="my_textarea" id="my_textarea"&gt;&lt;/textarea&gt;&lt;br&gt;&lt;br&gt;
  &lt;div id="preview"&gt;&lt;/div&gt;&lt;br&gt;
  &lt;button id="btn" onClick="preview();"&gt;Preview&lt;/button&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Demo : <a href="http://jsfiddle.net/yZ6Va/" rel="nofollow">http://jsfiddle.net/yZ6Va/</a></p>