如何解决CodeMirror中的输入问题

问题描述 投票：0回答：1

我正在尝试使用代码镜像来读取并将文件内容显示到textarea中，但每次加载文件时，它都会将内容打印为一行，忽略所有换行符，如果我尝试手动输入文本在文本字段中，它会自动标记第一行之后的每一行。

适当的文本格式文件格式：

适当的textarea造型：

选择文件的不幸结果（此文本格式不能与编译按钮一起使用）：

完整的HTML代码（包含建议的编辑;仍然无效）：

<!DOCTYPE html>

<html lang="en_US">
   <head>
    <title>Phoenix - UMSL's Online Assembly Code Compiler</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1 shrink-to-fit=no" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="codemirror/lib/codemirror.js"></script>
    <link rel="stylesheet" href="codemirror/lib/codemirror.css">
    <link rel="stylesheet" href="codemirror/theme/colorforth.css">
    <script src="codemirror/mode/javascript/javascript.js"></script>
    <script src="codemirror/mode/cobol/cobol.js"></script>
    <link rel="stylesheet" href="CSS/styling.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.46.0/codemirror.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.46.0/codemirror.min.css">
   </head>

<body>
<fieldset>

<!-- Form Name -->
<nav class="navbar navbar-expand-lg navbar-expand-lg" style="border-bottom: 5px solid white;">
  <a class="navbar-brand" href="./homepage.html"> <img src="IMGS/phoenix-small.png">PHOENIX</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="./homepage.html">Home</a>
          <a class="dropdown-item" href="./reference.html">Reference</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="./about.html">About Team Phoenix</a>
        </div>
      </li>
    </ul>
  </div>
  <a style="color:white;">UMSL's Online Assembly Code Compiler</a>
</nav>
<div class="WORKPLEASE" style="max-width: 98%;">
</br>
</br>
</br>
</br>
</br>
<!-- File Button --> 
<div class="form-group">

  <label class="row justify-content-md-center" for="filebutton" style="font-size: 40px">Choose a file to compile: </br></label>
  <div class="row justify-content-md-center">
    <input id="filebutton" name="filebutton" class="input-file" type="file">
      <!--File Upload Script -->
      <script type="text/javascript" src="fileUploadScript.js"></script>
  </div>
</div>
</br>



<div class="row justify-content-md-center">
<p style="font-size: 40px;"> or... </br></p>
</div>


</br>
<!-- Textarea -->
<div class="form-group">
  <label class="row justify-content-md-center" for="textarea" style="font-size: 40px">Write the file in the text field below: </br></label>
  <div class="col-md-6 offset-md-3">
    <div id="textarea" name="textarea" placeholder="Type your code here!" style="min-height: 250px; min-width: 100%; border-style: solid;"></div>
    <script>
    let editor = CodeMirror(document.getElementById("textarea"),{
        lineNumbers: true,
        mode: "cobol",
        theme: "colorforth"
    });
    document.getElementById("filebutton").addEventListener('change', function() {
        var fr = new FileReader();
        fr.onload = function() {
            editor.setValue(this.result); // Need to use the setValue method
            //document.getElementById("textarea").textContent = this.result;
        }
        fr.readAsText(this.files[0]);
    })
    </script>
  </div>
</div>

<!-- Button -->
<div class="form-group">
  <label class="row justify-content-md-center" for="singlebutton"></label>
  <div class="row justify-content-md-center">
    <button id="textareabutton" name="singlebutton" class="btn btn-primary" onclick="main()" style="background-color:red; border-color:red;">Compile</button>
    <script src="assmblyCode.js"></script>
  </div>
</div>
</div>
</fieldset>

<!--<div id="footer">-->
    <!--<p style="padding-top: 25px;">-->

        <!--© Copyright 2019 Team Phoenix-->
    <!--</p>-->
<!--</div>-->
</body>
</div>

styling.css文件：

/* Color assignment */
body {

 background-image: url("../IMGS/binary.gif");
 background-color: #cccccc;
}
.form-group{background-color:black;}
head {background-color: firebrick;}
h1 {color: blue}
h2 {color: snow}
nav {background-color: firebrick;}
a {color: snow;}
div {color: Azure}
/*italicizes and specifies which page you are on with color*/
a:hover{font-style: italic;}
/* alignment and font size */
head { font-size: 20pt}
h1 {text-align: center}
h2 {text-align: center}
h2 {font-size: 22pt}
.argname {font-size: 20px; text-decoration: underline; padding-top: 10px; background-color: black;}
.sides{ width:50%; float:left; padding-left: 20px}
.LI-profile-badge{
    width:25%;
    float:left;
    padding-left: 20px;
}
#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 70px;
    background-color: black;
    text-align: center;
}

fileUpload Script.is用于将文件加载到文本区域：

document.getElementById("filebutton").addEventListener('change', function () {
    var fr = new FileReader();
    fr.onload = function () {
        document.getElementById("textarea").textContent = this.result;
    }
    fr.readAsText(this.files[0]);
})
//https://www.youtube.com/watch?v=QI_NClLxnF0

希望有人能够发现做错了什么。

javascript html css css3 codemirror
1个回答
0
投票

CodeMirror有几种内容操作方法。您将需要使用setValue方法。

doc.setValue(content: string)
    Set the editor content.

请参考以下代码块以获取我的建议。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.46.0/codemirror.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.46.0/codemirror.min.css">
</head>

<body>
    <!-- File Button -->
    <div class="form-group">

        <label class="row justify-content-md-center" for="filebutton" style="font-size: 40px">Choose a file to compile:</label>
        <div class="row justify-content-md-center">
            <input id="filebutton" name="filebutton" class="input-file" type="file">
        </div>
    </div>

    <div class="row justify-content-md-center">
        <p style="font-size: 40px;"> or...</p>
    </div>

    <!-- Textarea -->
    <div class="form-group">
        <label class="row justify-content-md-center" for="textarea" style="font-size: 40px">Write the file in the text field below: </br>
        </label>
        <div class="col-md-6 offset-md-3">
            <div id="textarea" name="textarea" placeholder="Type your code here!" style="min-height: 250px; min-width: 100%; border-style: solid; border-width: 1px; border-color: gray"></div>

            <!-- This is where I think the problem is -->
            <script>
                let editor = CodeMirror(document.getElementById("textarea"), {
                    lineNumbers: true,
                    mode: "cobol",
                    theme: "colorforth"
                });
                document.getElementById("filebutton").addEventListener('change', function() {
                    var fr = new FileReader();
                    fr.onload = function() {
                        editor.setValue(this.result); // Need to use the setValue method
                        //document.getElementById("textarea").textContent = this.result;
                    }
                    fr.readAsText(this.files[0]);
                })
            </script>
            <!-- This is where I think the problem is -->

        </div>
    </div>

    <!-- Button -->
    <div class="form-group">
        <label class="row justify-content-md-center" for="singlebutton"></label>
        <div class="row justify-content-md-center">
            <button id="textareabutton" name="singlebutton" class="btn btn-primary" onclick="main()" style="background-color:red; border-color:red;">Compile</button>
        </div>
    </div>
</body>

</html>

更具体地说，editor.setValue(this.result);是它的工作原理。看看这个JS Bin

在你的fileUploadScript.js你必须使用editor.setValue()。

document.getElementById("filebutton").addEventListener('change', function () {
    var fr = new FileReader();
    fr.onload = function () {
        editor.setValue(this.result);
        //document.getElementById("textarea").textContent = this.result;
    }
    fr.readAsText(this.files[0]);
})

您无法将代码强制进入textarea。它只是赢得了'工作。您必须使用如上所示的setValue方法。

CodeMirror: Usage Manual。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.