execCommand를 사용하여 contentEditable div에서 탭핑 허용

Question

contentEditable div에 탭이 있어야하는 곳에 응용 프로그램을 만들고 있습니다. 나는 이미 올바르게 작동하는 것이 불가능하다는 것을 이미 알아 냈습니다. 그래서를 keyDown에 그것을 할 수있는 방법이 있는지 누군가가 알고 있다면 내가 지금까지 가지고하는 것은이

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

입니다

	 

있는 탭의 HTML 코드를 추가하는 방법이 있습니다 이것, 또는 그것이 방법이고 나는 단순히 잘못하고 있다면, 제발 말해줘! 감사!

Answer 1

되는 HTML 사양은 TAB의 문자가 그것이 < 사전 > 요소 내에 포함되는 때를 제외하고는 단일 공백으로 처리되어야 함을 지정한다.

위에서 게시 한 코드가 작동하고 Tab 문자가 삽입되지만 브라우저에 공백으로 표시됩니다. 편집 가능한 전체 내용을 < > 태그 앞에 넣으면 탭이 표시됩니다. 당신은 단지 들여 쓰기 내용에 탭을 사용하려면

, 당신은 또한

execCommand('indent', false, null)

Answer 2

"들여 쓰기"명령으로 볼 수, 파이어 폭스는 BLOCKQUOTE 요소를 선택한 텍스트를 랩합니다.
그래서 하나의 탭 이동을 나타내는 BLOCKQUOTE 요소에 대한 마진 왼쪽 또는 패딩 왼쪽 속성을 정의 할 수 있습니다.
"outdent"명령은 blockquote 요소와 따라서 스타일을 제거합니다.

Answer 3

향후 독자를 위해 더 간단한 해결책은 '사전'공백 스타일을 사용하는 것입니다. 원본 게시물 here.

white-space: pre;