title: Exec Command in a ContentEditable div
body: <p>I was trying to create a WYSIWYG editor using a contenteditable div. I was trying to bold the selected text using the ExecCommand.This does not seem to work properly . I have tested in IE.Here is the code.Please help me identifying the error if any in the program.</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"  
       type="text/javascript"&gt;&lt;/script&gt;                 
      &lt;style&gt;
      #rteToolBar span{
       cursor:pointer;
       }
     #rteToolBar span:hover{
       background:#3535ff;
       }
   &lt;/style&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code> &lt;div id="rteWrapper"  &gt;
     &lt;div id="rteToolBar" style="border: thin solid black"&gt;
       &lt;span role="BOLD" &gt;B&lt;/span&gt;
   &lt;span role="ITAL"&gt;I&lt;/span&gt;
   &lt;span role="TABL"&gt;Table&lt;/span&gt;  
     &lt;/div&gt;
    &lt;div id="rte" contentEditable="true" style="border: thin solid red"&gt;
       asdfla sdf asdf asdfas
   fas &lt;b&gt;fasldf&lt;/b&gt; asfdsadf&lt;br/&gt;
   asdfla sdf asdf asdfas
   fas fasldf asfdsadf
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>
   </p>
  
  <pre><code>var range,rte,caretoffset;
      $(document).ready(function(){
     var rteWrapper = $('#rteWrapper');
     var toolBar = $('#rteToolBar');
         rte = $('#rte');
     $(toolBar).find('span').live('click',function(){
         rte.focus();
         var _this = $(this);
         var role = _this.attr('role');
  
              switch(role){
            case 'BOLD': 
            var range1 = document.selection.createRange();
  
           range1.execCommand('bold',false,null);
            break;
            case 'ITAL': 
            break;
  
            }
  
      });
       });
  
  
  
   &lt;/script&gt;
  </code></pre>
  
  <p></p>