Question

我正在创建大纲编辑器。我试图创建一个下拉按钮的地方，在用户输入内容可编辑的文本之后，用户可以选择更改字体大小。不知道哪种方法最适合当前使用的代码。我避免使用jQuery的想法。任何帮助将不胜感激。

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);
  } else if (code == TAB_KEY * TAB_KEY){
    e.preventDefault();
    let parent = e.target;
    let ol = document.createElement('ol');
    let li = document.createElement('li');
    ol.appendChild(li);
    parent.appendChild(ol);
    moveCursorToEnd(li);
  }
});

function moveCursorToEnd(el) {
  el.focus();
  document.execCommand('selectAll', false, null);
  document.getSelection().collapseToEnd();
}

function saveTextFile(){
  let textToSave = document.getElementById("text").innerHTML;
  let textToSaveAsBlob = new Blob([textToSave], {type:"text/plain"});
  let textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
  let fileName = document.getElementById("saveAs").value;

  let downloadLink = document.createElement("a");
  downloadLink.download = fileName;
  downloadLink.innerHTML = "Download File";
  downloadLink.href = textToSaveAsURL;
  downloadLink.onclick = destroyClickedElement;
  downloadLink.style.display = "none";
  document.body.appendChild(downloadLink);

  downloadLink.click();
}
function destroyClickedElement(event){
  document.body.removeChild(event.target);
}

function loadFile(){
  let fileLoad = document.getElementById("load").files[0];

  let fileReader = new FileReader();
  fileReader.onload = function(fileLoadedEvent){

    let textFromFileLoaded = fileLoadedEvent.target.result;
    document.getElementById("text").innerHTML = textFromFileLoaded;
  };
  fileReader.readAsText(fileLoad, "UTF-8");
}

/*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");
}
}

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 个答案: