允许使用execCommand在contentEditable div中进行Tabbing

Question

我正在创建一个应用程序，我需要一个contentEditable div才能在其中添加标签。我已经发现，实际上不可能正常工作。那么在keyDown上是否有一种方法可以为选项卡添加HTML代码，即

	

到目前为止我所拥有的是

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
    }
}

如果有人知道是否有办法做到这一点，或者如果是这样，我只是做错了，请告诉我！谢谢！

Answer 1

HTML规范指定应将TAB char视为单个空格，除非它包含在＆lt; pre＆gt; 元素中。

您在上面发布的代码确实有效，它确实插入了TAB字符，但它只是由浏览器显示为空白区域。如果您可以将整个可修改内容放在＆lt; pre＆gt; 标记中，那么您的标签就会显示出来。

如果您只想使用标签缩进内容，您还可以查看

execCommand('indent', false, null)

Answer 2

对于未来的读者来说，也许更简单的解决方案就是使用'pre'白色空间风格。原始帖子here。

white-space: pre;

Answer 3

“indent”命令， firefox用blockquote元素包装所选文本。
因此，可以为blockquote元素定义 margin-left 或 padding-left 属性来表示Tab键。
“outdent”命令将删除blockquote元素，从而删除样式。