jquery content editable indent
<p>I've been looking for a few hours now, and still can't work it out.</p>

<p>So I am working on a text editor and I want it so when they press the '<strong>tab</strong>' key it indents the text, that either I have selected or the text in front of my cursor text selector. I have been looking in to design mode and I've tried to make one element designMode but you can't unless I was doing it wrong. This is my code, that starts up my simple editor</p>

<pre><code> $(".code").click(function () {
   $(".code").attr('contenteditable', 'true');
   document.getElementById("code").designMode = "on";
 });
</code></pre>

<p>and then the '<strong>tab key code</strong>'</p>

<pre><code>$(".code")
  .keydown(function (e) {      
  var keyCode = e.keyCode || e.which;
  if(keyCode == 9) {
    e.preventDefault();

  }
});
</code></pre>

<p><strong>Question:</strong> How do you indent in contenteditable for example in a texteditor you can indent nothing or text. (I dont have any problems with my key events not firing)</p>

<p>This is not a textarea or input box, its just a contenteditable div</p>
