如何通过jQuery HTML在内容可编辑div中制作不同的样式编号列表和项目符号列表

Question

我正在创建一个没有任何插件的富文本编辑器，因为我无法使用自己的样式自定义任何插件。

现在我要添加几个样式项目符号列表和编号列表。

如下所示的编号样式：

1) adsdd
    a)sdsdsds
        i)dfdfdfddf
2)erererere

子弹样式如下：

*aaaa
    - bbbbbb
+ cccccc

按Tab键时我想使用不同的符号。此外，当在内容可编辑div中按Tab键时，它将转发四个空格。

我使用execcomand作为orderlist和unorderlist，但它只给了我一种风格。但是当按Tab键时，我想要不同的样式和一个列表在子列表下，当按Tab键时子列表再次有另一个子列表。

我的jQuery代码就在那里：

function orderList1() {
    document.execCommand('formatblock', false, 'p')
    var listId = window.getSelection().focusNode.parentNode;
    $(listId).addClass("oder2");
    alert(listId);
    $(".textcontent").keydown(function(e) {
        if(i<6){
            if (e.keyCode == 9) {
                if(i===0){
                    var listId1 = window.getSelection().focusNode.parentNode;
                    $(listId1).removeClass('oder2');
                    $(listId1).addClass("oder3");
                    i++;
                    $(".textcontent").keydown(function(e) {
                        if(e.keyCode == 8){
                            var nodeNull = listId1.textContent;
                            if(listId1.textContent === '')
                                alert(nodeNull);
                            $(listId1).removeClass('oder3');

                        }
                    });

                }
                else if(i===1){
                    var listId2 = window.getSelection().focusNode.parentNode;
                    $(listId2).removeClass("oder3");
                    $(listId2).addClass("oder4");
                    i++;
                }
                e.preventDefault();
                e.stopPropagation();
//                        return false;
            }
        }
    });

}

CSS：

body {
    counter-reset: section;
}
.oder2{
    counter-reset: subsection;
    padding-left: 3em;
}
.oder2:before {
    counter-increment: section;
    content:  counter(section) ") ";
}
.oder3 {
    counter-reset: subsection1;
    padding-left: 6em;
}
.oder3:before {
    counter-increment: subsection;
    content: counter(subsection, lower-alpha) ") " ;
/*counter(section) "." counter(subsection) " ";*/
}
.oder4{
    padding-left: 9em;
}
.oder4:before {
    counter-increment: subsection1;
    content: counter(subsection1, lower-roman) ") " ;
/*counter(section) "." counter(subsection) " ";*/
}