从下面的示例中。我只能使用tab和Enter将我的项目符号列表缩进1级。我的目的是尝试将其推入3级列表。但是，我不确定如何从当前获得的当前代码开始。任何建议，将不胜感激。
const TAB_KEY = 9;
const ENTER_KEY = 13;
let editor = document.querySelector('.editor');
editor.appendChild(document.createElement('li'));
editor.addEventListener('focus',(e) => {
//let ul = e.target;
//let li = document.createElement('li');
//ul.appendChild(li);
});
editor.addEventListener('keydown',(e) => {
let code = e.keyCode || e.which;
if (code == TAB_KEY) {
e.preventDefault();
let parent = e.target;
let ul = document.createElement('ul');
let li = document.createElement('li');
ul.appendChild(li);
parent.appendChild(ul);
moveCursorToEnd(li);
} else if (code == ENTER_KEY) {
e.preventDefault();
let parent = e.target;
let li = document.createElement('li');
parent.appendChild(li);
moveCursorToEnd(li);
}
});
function moveCursorToEnd(el) {
el.focus();
document.execCommand('selectAll',false,null);
document.getSelection().collapseToEnd();
}body {
margin-top: 1em;
margin-bottom: 10em;
margin-right: 1em;
margin-left: 1em;
border: solid;
border-color: #0033cc;
}
div button {
padding: 1em 2em;
color: white;
background-color: #0000cc;
}
div input {
padding: 1em 2em;
color: white;
background-color: #0000cc;
}
div {
list-style-type: square;
list-style-position: inside;
margin-left: 0.25em;
}
.editor {
margin-bottom: auto;
font-weight: normal;
}<!DOCTYPE html>
<meta charset="utf-8">
<body>
<head>
<title>outliner</title>
<link href="style.css" rel="stylesheet" title="Style">
<div>
<input type="button" onclick="reset();" value="Reset form">
<button id="pr" onclick="reset()"> Clear </button>
<div class="editor" contenteditable="true" draggable="true"></div>
</div>
</head>
<script type="text/javascript" src='setting.js'></script>
</body>