将CSS文件加载到textarea（ace.js）

Question

我想做一个将在texarea中加载文件的按钮。该textarea将响应样式（例如，如果我将在此textarea p {color：white;}中编写，而在html texttexta中我将编写

嗨

，css文本区域会更改此“嗨”的颜色。）但是，当我加载一个CSS文件时，该文件不是CSS文件，而是html文件（结果类似于p {color：white;}）。请帮助我。

*{
  padding: 0;
  margin: 0;
}
#htmlEditor {
    height: 100%;
    min-height: 43vh;
    width: 33.03%;
    display: inline-block;
}
#cssEditor {
    height: 100%;
    min-height: 43vh;
    width: 33.03%;
    display: inline-block;
}
#pos-font-html {
  position: relative;
left: 595%;
}
#btn-font-html {
background: none;
   cursor: pointer;
   color: white;
   border: none;
}
#btn-font-html::after {
  content:"\f1f8";
   font-family: "FontAwesome";
   font-size: 1.3em;
}
#pos-font-css {
  position: relative;
left: 720%;
}
#btn-font-css {
background: none;
   cursor: pointer;
   color: white;
   border: none;
}
#btn-font-css::after {
  content:"\f1f8";
   font-family: "FontAwesome";
   font-size: 1.3em;
}
#pos-font-js {
  position: relative;
left: 315%;
}
#btn-font-js {
background: none;
   cursor: pointer;
   color: white;
   border: none;
}
#btn-font-js::after {
  content:"\f1f8";
   font-family: "FontAwesome";
   font-size: 1.3em;
}
#jsEditor {
    height: 100%;
    min-height: 43vh;
    width: 33.03%;
    display: inline-block;
}
#container {
    height: 100%;
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}
#result {
    min-height: 440px;
    position: relative;
    background-color: white;
    width: 79.6%;
}
#line4 {
border-right: 4px solid #1c1e19;
display: flex;
padding: 1%;
margin: -26.8% 0% 0 0%;
position: relative;
height: 414.5px;
float: right;
}
#result-block {
    margin-top: -0.2%;
}
  #title-of-textarea {
    display: flex;
    background-color: white;
    color: white;
    background-color: #272822;
  font-family: 'Yanone Kaffeesatz', sans-serif;
padding-top: 0.5%;
padding-bottom: 0.1%;
  }
  #title-Html {
    padding: 0 0 0 1%;
    display: flex;
  }
  #title-css {
margin: 0 0 0 auto;
padding: 0 0 0 2%;
display: flex;
  }
    #title-js {
margin: auto;
position: relative;
left: 2.5%;
display: flex;
  }
  .mnu-code {
    display: flex;
    list-style-type: none;
    padding: 0 0 0 2%;
  }
.mnu-code li {
    padding-left: 5%;
}
#menu-code {
    width: 50%;
    cursor: pointer;
    font-family: 'Alegreya Sans', sans-serif;
    font-size: 1.1em;
}
#mnu-code {
    padding: 24% 0% 0 3%;
}
#drop-download {
    display: none;
    position: absolute;
z-index: 9000;
background-color: #eaeaea;
height: 90px;
width: 12%;
cursor: default;
color: black;
   border-radius: 4px; 
   -webkit-border-radius: 4px; 
   -moz-border-radius: 4px; 
   -khtml-border-radius: 4px; 
      -webkit-box-shadow: 0px 0px 11px 5px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 11px 5px rgba(0,0,0,1);
box-shadow: 0px 0px 11px 5px rgba(0,0,0,1);
margin: 0.3% 0 0 0;
}
#drop-upload {
   display: none;
    position: absolute;
z-index: 9000;
background-color: #eaeaea;
height: 90px;
width: 12%;
cursor: default;
color: black;
   border-radius: 4px; 
   -webkit-border-radius: 4px; 
   -moz-border-radius: 4px; 
   -khtml-border-radius: 4px; 
      -webkit-box-shadow: 0px 0px 11px 5px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 11px 5px rgba(0,0,0,1);
box-shadow: 0px 0px 11px 5px rgba(0,0,0,1);
margin: 0.3% 0 0 0;
}
#upload-html {
  padding: 0% 0 0 5%;
position: relative;
top: 10%;
font-family: 'Alegreya Sans', sans-serif;
cursor: pointer;
font-weight: 500;
font-size: 1.02em;
}
#upload-css {
padding: 0% 0 0 5%;
position: relative;
top: 10%;
font-family: 'Alegreya Sans', sans-serif;
cursor: pointer;
font-weight: 500;
font-size: 1.02em;
}
#upload-css::before {
        content:"\f13c";
    font-family: "FontAwesome";
    letter-spacing: 3px;
    }
#upload-js {
padding: 0% 0 0 5%;
position: relative;
top: 10%;
font-family: 'Alegreya Sans', sans-serif;
cursor: pointer;
font-weight: 500;
font-size: 1.02em;
}
#upload-js::before {
        content:"\f3b9";
    font-family: "Font Awesome 5 Brands";
    letter-spacing: 3px;
}
#download-html::before {
        content:"\f13b";
    font-family: "Font Awesome 5 Brands";
    letter-spacing: 3px;
}
#download-html {
padding: 0% 0 0 5%;
position: relative;
top: 10%;
font-family: 'Alegreya Sans', sans-serif;
cursor: pointer;
font-weight: 500;
font-size: 1.1em;
}
#download-css {
padding: 0% 0 0 5%;
position: relative;
top: 10%;
font-family: 'Alegreya Sans', sans-serif;
cursor: pointer;
font-weight: 500;
font-size: 1.1em;
}
.css_img {
    float: left;
padding: 5% 5% 0 5.4%;
position: relative;
}
#download-js {
padding: 0% 0 0 5%;
position: relative;
top: 10%;
font-family: 'Alegreya Sans', sans-serif;
cursor: pointer;
font-weight: 500;
font-size: 1.1em;
}
#download-css::before {
        content:"\f38b";
    font-family: "Font Awesome 5 Brands";
    letter-spacing: 3px;
}
#download-js::before {
        content:"\f3b9";
    font-family: "Font Awesome 5 Brands";
    letter-spacing: 3px;
}
#header-code {
    padding: 1% 0 1% 0;
       background-color:#1c1e19;
           display: flex;
}

#set {
    cursor: pointer;
}
#download-window-name-of-file-html {
    background-color: #eaeaea;
    width: 30%;
    height: 100px;
    position: fixed;
    z-index: 90000;
    top: 30%;
left: 32%;
color: black;
   border-radius: 4px; 
   -webkit-border-radius: 4px; 
   -moz-border-radius: 4px; 
   -khtml-border-radius: 4px; 
   -webkit-box-shadow: 0px 0px 21px 8px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 21px 8px rgba(0,0,0,1);
box-shadow: 0px 0px 21px 9px rgba(0,0,0,1);
display: none;
}
#download-window-name-of-file-css {
    background-color: #eaeaea;
    width: 30%;
    height: 100px;
    position: fixed;
    z-index: 90000;
    top: 30%;
left: 32%;
color: black;
   border-radius: 4px; 
   -webkit-border-radius: 4px; 
   -moz-border-radius: 4px; 
   -khtml-border-radius: 4px; 
   -webkit-box-shadow: 0px 0px 21px 8px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 21px 8px rgba(0,0,0,1);
box-shadow: 0px 0px 21px 9px rgba(0,0,0,1);
display: none;
}
#download-window-name-of-file-js {
    background-color: #eaeaea;
    width: 30%;
    height: 100px;
    position: fixed;
    z-index: 90000;
    top: 30%;
left: 32%;
color: black;
   border-radius: 4px; 
   -webkit-border-radius: 4px; 
   -moz-border-radius: 4px; 
   -khtml-border-radius: 4px; 
   -webkit-box-shadow: 0px 0px 21px 8px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 21px 8px rgba(0,0,0,1);
box-shadow: 0px 0px 21px 9px rgba(0,0,0,1);
display: none;
}
#htmlfileToLoad {
    padding: 3% 0 0 5%;
}
#cssfileToLoad {
    padding: 3% 0 0 5%;
}
#jsfileToLoad {
    padding: 3% 0 0 5%;
}
#close {
    float: right;
    border: none;
    position: relative;
right: 1%;
font-size: 0.9em;
cursor: pointer;
}
#close::after {
    content: "\f00d";
    font-family: "FontAwesome";
}
#download-html-file {
    border: none;
    width: 27%;
height: 29px;
   border-radius: 3px; 
   -webkit-border-radius: 3px; 
   -moz-border-radius: 3px; 
   -khtml-border-radius: 3px; 
   cursor: pointer;
   float: right;
   margin: 2.5% 5% 0 0;
}
#download-css-file {
    border: none;
    width: 27%;
height: 29px;
   border-radius: 3px; 
   -webkit-border-radius: 3px; 
   -moz-border-radius: 3px; 
   -khtml-border-radius: 3px; 
   cursor: pointer;
   float: right;
   margin: 2.5% 5% 0 0;
}
#download-js-file {
    border: none;
    width: 27%;
height: 29px;
   border-radius: 3px; 
   -webkit-border-radius: 3px; 
   -moz-border-radius: 3px; 
   -khtml-border-radius: 3px; 
   cursor: pointer;
   float: right;
   margin: 2.5% 5% 0 0;
}
.upload::before {
    content: "\f093";
    font-family: "FontAwesome";
    letter-spacing: 3px;
}
#upload-html::before {
        content:"\f121";
    font-family: "FontAwesome";
    letter-spacing: 3px;
}
#pick-html-file {
    padding: 3% 0% 0 5%;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
}
#pick-css-file {
    padding: 3% 0% 0 5%;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
}
#pick-js-file {
    padding: 3% 0% 0 5%;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
}
#instruction {
    padding: 3% 0% 0 5%;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.5em;
}
#instruction-text {
    padding: 2% 0 0 5%;
}
#aside-block {
    width: 20%;
    height: 946px;
   background-color: #3b3d34;
    float: right;
    font-size: 1.2em;
      font-family: 'Yanone Kaffeesatz', sans-serif;
      color: white;
}
.dropdown-content p {
    display: block;
    position: absolute;
}
.box-label{
    display: inline-block;
    margin: 5px;
        cursor: pointer;
}
.save::before {
    content:"\f0c7";
    font-family: "FontAwesome";
}
.download::before {
    content:"\f019";
    font-family: "FontAwesome";
    letter-spacing: 3px;
}
#dropbtn-html {
    background-color: #272822;
    color: white;
    border: none;
    cursor: pointer;
        font-size: 1.5em;
      font-family: 'Yanone Kaffeesatz', sans-serif;
}
#dropbtn-css {
    background-color: #272822;
    color: white;
    border: none;
    cursor: pointer;
        font-size: 1.5em;
      font-family: 'Yanone Kaffeesatz', sans-serif;
}
.center-on-page {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
h1 {
  text-align: center;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  outline: 0;
  box-shadow: none;
  border: 0 !important;
  background-image: none;
    width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 0 0 .5em;
  cursor: pointer;
    color: black;
  background: white;
}

.select {
  position: relative;
  display: block;
  width: 90%;
  height: 2em;
  background: #2c3e50;
  overflow: hidden;
  border-radius: .25em;
  margin: 1% 0% 5% 0;
  border: 1px solid #272822;
}
select::-ms-expand {
  display: none;
}
/* Arrow */
.select::after {
  content: '\25BC';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 0 0.5em;
  background: rgb(59, 61, 52);
  pointer-events: none;
    line-height: 2.4;
      -webkit-transition: .25s all ease;
  -o-transition: .25s all ease;
  transition: .25s all ease;
  color: white;
}
/* Transition */
.select:hover::after {
  color: #f39c12;
}
#dropbtn {
    background-color: #272822;
    color: white;
    border: none;
    cursor: pointer;
        font-size: 1.5em;
      font-family: 'Yanone Kaffeesatz', sans-serif;
}
.dropdown-content {
    position: absolute;
    background-color: white;
    z-index: 9000;
    -webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 280%;
height: 170px;
text-align: left;
top: 100%;
display: none;
}
.language {
    padding: 6% 0 0 8%;
}
.dropdown-content #name-of-select1 {
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.2em;
    color: black;
}
.dropdown-content #name-of-select2 {
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 1.2em;
    color: black;
}
.dropdown-content-css {
 position: absolute;
background-color: black;
z-index: 9000;
width: 5%;
height: 100px;
text-align: center;
top: 8%;
display: none;
}
.dropdown-content-html {
 position: absolute;
background-color: black;
z-index: 9000;
width: 5%;
height: 100px;
text-align: center;
top: 8%;
display: none;
}
#title-js::after {
        content: "\f0d7";
font-family: "FontAwesome";
font-size: 1em;
position: relative;
right: 9%;
top: 5%;
padding: 6% 0 0 0;
}
#title-css #dropbtn-css::after {
        content:"\f0d7";
    font-family: "FontAwesome";
    font-size: 0.7em;
    position: relative;
    left: 9%;
}
#title-Html #dropbtn-html::after {
        content:"\f0d7";
    font-family: "FontAwesome";
    font-size: 0.7em;
    position: relative;
    left: 9%;
}
.run-code::before {
    content:"\f144";
    font-family: "FontAwesome";
}
.change::before {
    content:"\f17a";
    font-family: "FontAwesome";
}

  function loadFileHtml(file, evt) {
            var htmlFileInput = document.getElementById('htmlfileToLoad').files[0];
            var htmlreader;
            htmlreader = new FileReader();
            htmlreader.onload = (function (file) {
              var textFromFileLoaded = file.target.result;
              var htmlEditor = ace.edit('htmlEditor');
                htmlEditor.getSession().setValue(textFromFileLoaded);
            });
            htmlreader.readAsText(htmlFileInput, "UTF-8");
        }

          function loadFileCss(file, evt) {
            var cssFileInput = document.getElementById('cssfileToLoad').files[0];
            var cssreader;
            cssreader = new FileReader();
            cssreader.onload = (function (file) {
              var textFromFileLoaded = file.target.result;
              var cssEditor = ace.edit('cssEditor');
                cssEditor.getSession().setValue(textFromFileLoaded);
});
            cssreader.readAsText(cssFileInput);
        }

https://stackoverflow.com/questions/ask#