Разрешить табуляцию в div contentEditable с execCommand

Question

Я делаю приложение, в котором мне нужно, чтобы в div для contentEditable были разрешены вкладки.Я уже понял, что на самом деле невозможно работать правильно.Так есть ли способ, что на 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

Для будущих читателей, возможно, более простое решение - просто использовать стиль «pre». оригинальный пост здесь .

white-space: pre;

Answer 2

Спецификация HTML указывает, что символ табуляции должен обрабатываться как один пробел, за исключением случаев, когда он содержится внутри элемента .

Код, который вы разместили выше, работает, и он вставляет символ TAB, но он просто отображается браузером как пробел.Если вы можете поместить весь редактируемый контент в тег , то ваши вкладки появятся.

Если вы хотите использовать вкладки только для отступа в контенте, вы также можете посмотреть

execCommand('indent', false, null)

Answer 3

Команда «Отступ», Firefox оборачивает выделенный текст элементом блочной цитаты. Таким образом, можно определить свойство margin-left или padding-left для элемента blockquote для представления табуляции.Команда outdent удалит элемент blockquote и, следовательно, стили.