JavaScript - Использование клавиши табуляции в div contentEditable

Question

Я полностью осознаю, что этот вопрос выглядит как дубликат, но это не так. Пожалуйста, прочитайте.

у меня есть div тег с атрибутом contentEditable="true", Я пытаюсь сделать так, чтобы я мог использовать клавишу табуляции внутри div без этого движущиеся фокусы. Вот код, который у меня есть, который не полностью решает проблему:

var tab = function(id){
 if(event.keyCode === 9){
    event.preventDefault();
    document.getElementById(id).innerHTML += "    ";
    setCaretPos(id);
 }
}

var setCaretPos = function(id){
   var node = document.getElementById(id);
   node.focus();
   var textNode = node.firstChild;
   var caret = textNode.length;
   var range = document.createRange();
   range.setStart(textNode, caret);
   range.setEnd(textNode, caret);
   var sel = window.getSelection();
   sel.removeAllRanges();
   sel.addRange(range);
}

В основном это просто добавление четырех пробелов к концу значения текста внутри div, а затем перемещение каретки до конца. Это становится проблемой, когда я использую вкладки в других строках, потому что это просто добавит вкладку в конец (если я еще не в последней строке).

Итак, я хочу вставить четыре пробела, где находится каретка. Вот где проблема приходит. Я покажу код, но я не уверен, что я делаю неправильно. Я хочу добавить четыре пробела к тексту перед кареткой, а затем добавить весь текст после каретки. Вот код:

var insertTabAtCaret = function(id){
   if(event.keyCode === 9){
       event.preventDefault();
       var box = document.getElementById(id);
       if(box.selectionStart || box.selectionStart == "0"){
           var startPos = box.selectionStart;
           var endPos = box.selectionEnd;
           box.innerHTML.substring(0, startPos) + "    " + box.innerHTML.substring(endPos, box.innerHTML.length);
       }
    }
}

Пожалуйста помоги! Дайте мне знать, как я могу добиться вкладки в contentEditablediv используя метод, описанный выше! (Я бы предпочел это в обычном JavaScript, но jQuery допустим. Пожалуйста, не говорите мне о библиотеках, плагинах, расширениях и т. Д. Я не хочу использовать ни один из них.)

Answer 1

document.querySelector("div").addEventListener("keydown",insertTabAtCaret);

function insertTabAtCaret(event){
   if(event.keyCode === 9){
       event.preventDefault();
       var range = window.getSelection().getRangeAt(0);

       var tabNode = document.createTextNode("\u00a0\u00a0\u00a0\u00a0");
       range.insertNode(tabNode);

       range.setStartAfter(tabNode);
       range.setEndAfter(tabNode); 
        
   }
}

div#editor{
  height: 200px;
  width:80%;
  border: solid
}

<div contenteditable id="editor">
some text
</div>