Permitir tabulación en un contentEditable div con execCommand

Question

Estoy haciendo una aplicación en la que necesito un contenidoEditable div para poder tener pestañas en él. Ya he descubierto que realmente no es posible tener que trabajar correctamente. Entonces, ¿hay una manera de que el keyDown se añade el código HTML de una pestaña, que es

	 

Lo que tengo hasta ahora es este

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,"	"); 
     //Thought this would work but it doesn't 
    } 
} 

Si alguien sabe si hay una manera de hacerlo esto, o si ese es el camino y simplemente lo estoy haciendo mal, ¡por favor díganme! ¡Gracias!

spec

Answer 1

El HTML especifica que un char TAB debe tratarse como un solo espacio en blanco a excepción de cuando está contenido dentro de una pre > elemento <.

El código que publicó anteriormente funciona y sí inserta un carácter de TAB pero solo aparece en el navegador como un espacio en blanco. Si puede poner todo su contenido editable en una etiqueta <pre>, aparecerán sus pestañas.

Si sólo desea utilizar las pestañas para contenido guión, también puede buscar en orden "guión"

execCommand('indent', false, null)

Answer 2

, Firefox envuelve el texto seleccionado con el elemento blockquote.
Así que uno puede definir un margin-left o padding-left propiedad para el elemento blockquote para representar la tabulación.
El comando "outdent" eliminará el elemento blockquote y por lo tanto los estilos.

Answer 3

Para lectores futuros, quizás una solución más simple es simplemente usar el estilo 'pre' de espacio en blanco. publicación original here.

white-space: pre;