JS创建一个缩进文本的方法

Question

我试图创建一个缩进文本（代码）的系统。 我有一个div，其属性contenteditable设置为true，可以编写代码。

这是我的代码：

    function moveCaret(win, charCount) {
    var sel, range;
    if (win.getSelection) {
        sel = win.getSelection();
        if (sel.rangeCount > 0) {
            var textNode = sel.focusNode;
            var newOffset = sel.focusOffset + charCount;
            sel.collapse(textNode, Math.min(textNode.length, newOffset));
        }
    } else if ( (sel = win.document.selection) ) {
        if (sel.type != "Control") {
            range = sel.createRange();
            range.move("character", charCount);
            range.select();
        }
    }
}

$(document).ready(function(e) {
    var edit = $('.edit');

    edit.on('keydown',function(e) {
        var e = e || window.event;
            charCode = e.which || e.keyCode;
        if(charCode == 9) {
            moveCaret(window, 5);
            return false;
        }
    });
});

如果我单击文本并按TAB键，光标会向前移动五个位置。 问题是，如果在div内部没有文本，这不起作用，我会在没有文本的情况下移动光标。

我该如何解决？

Answer 1

我尝试过这种方式，但代码没有被解释，然后将div放入五次： 

这是代码：

function insertTextAtCursor(text) {
var sel, range, html;
if (window.getSelection) {
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
        range = sel.getRangeAt(0);
        range.deleteContents();
        range.insertNode( document.createTextNode(text) );
    }
} else if (document.selection && document.selection.createRange) {
    document.selection.createRange().text = text;
}
}

var edit = $('.edit');

    edit.on('keydown',function(e) {
        var e = e || window.event;
            charCode = e.which || e.keyCode;
        if(charCode == 9) {
            var indent = '    ';
            insertTextAtCursor(indent);
            return false;
        }
    });