Question

我正在使用contenteditable，如果要按Tab键使其缩进1行然后再缩进第二行，则尝试在其中添加内容。我只能使它缩进1行，但不确定如何扩展它。我的代码可能不是正确的选择。

const TAB_KEY = 9;
const ENTER_KEY = 13;
const SHIFT_KEY = 16

const editor = document.querySelector('.editor');

    editor.appendChild(document.createElement('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();
}

/*editor.addEventListener('click', (x) => {
  x = document.getElementById("b");
  if(x.style.fontWeight == "bolder"){
    x.style.fontWeight = "normal";
  } else {
    x.style.fontWeight = "bolder";
  }
});*/

function bold(){
if(document.execCommand("bold")){
  document.execCommand("normal");
}else{
  document.execCommand("bold");
}
}
/*function underline(){
let x = document.getElementById("text");
if(x.style.textDecoration == "underline"){
  x.style.textDecoration = "none";
}else{
  x.style.textDecoration = "underline";
}
}*/

function underline(){
if(document.execCommand("underline")){
  document.execCommand("none");
}else{
  document.execCommand("underline");
}
}

/*function italic(){
let x = document.getElementById("text");
if(x.style.fontStyle == "italic"){
  x.style.fontStyle = "normal";
}else{
  x.style.fontStyle = "italic";
}
}*/


/*Turns the font of the text to Italic*/
function italic(){
if(document.execCommand("italic")){
  document.execCommand("normal");
}else{
  document.execCommand("italic");
}
}

function highlighSelectedText(){
  let sel = window.getSelection().getRangeAt(0);
  let selText = sel.extractContents();
  let span = document.createElement("span");
  span.style.backgroundColor = "yellow";
  span.appendChild(selText);
  sel.insertNode(span);
}


/*function printPage(){
  let printButton = document.getElementById("ul");
  printButton.style.visibility = 'hidden';
  window.print();
  printButton.style.visibility = 'visible';
}*/

body{
  margin-top:1em;
  margin-bottom: 10em;
  margin-right: 1em;
  margin-left: 1em;
  border: solid;
  border-color: #0033cc;
  background-color: #f6f6f6;
}

 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;
  margin-bottom: 5em;
}

section {
  padding: 1em 2em;
  color: white;
  background-color: #0000cc;
}
.editor {
  font-weight: normal;
}

div contenteditable{
  margin-bottom: 10em;
}

<!DOCTYPE html>
<meta charset="utf-8">
<body>
  <head>
    <title>Outliner</title>
    <link href="style.css" rel="stylesheet" title="Style">
    <div>
      <button id="b" onclick="bold()"> B </button>
      <button onclick="underline()"> U </button>
      <button onclick="italic()"> I </button>
      <input type="button" onclick="highlighSelectedText()"  value="Highlight"/>
      <input id="color" type="color">
      <button onclick="document.getElementById('text').style.color = document.getElementById('color').value">Set Colour</button>
      <div id="text" class="editor" contenteditable="true" draggable="true"></div>
    </div>

  </head>
  <script type= "text/javascript" src='setting.js'></script>
</body>

创建多级列表

0 个答案: