Q:

Allow Tabbing in a contentEditable div with execCommand

I am making an application where I need for a contentEditable div to be allowed to have tabs in it. I have already figured out that it is really not possible to have to work correctly. So is there a way that on keyDown it adds the HTML code for a tab, which is
&#09;

What I have so far is this
document.getElementById('codeline').contentEditable='true';
document.getElementById('codeline').onkeydown=function(e){
    if(e.keyCode==9){
        e.preventDefault();
        //document.getElementById('codeline').contentWindow.document.execCommand("InsertHTML",false,"&#09;"); 
        //Thought this would work but it doesn't
    }
}

If anybody knows if there is a way to do this, or if that is the way and I am simply doing it wrong, please tell me! Thanks!

A:

The HTML spec specifies that a TAB char should be treated as a single white space except for when it's contained inside a <pre> element. 
The code that you posted above does work and it does insert a TAB char but it's just displayed by the browser as a white space. If you can put your entire editable content in a <pre> tag then your tabs will show up. 
If you only want to use the tabs to indent content, you can also look into 
execCommand('indent', false, null)

A:

For future readers, perhaps a simpler solution is to just use the 'pre' white-space style. original post here.
white-space: pre;

