个人中心
gpt4 book ai didi

javascript - 如何修复 CodeMirror 中的输入问题

转载 作者：行者123 更新时间：2023-11-28 00:02:05 25 4
gpt4 key购买 nike

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

正确的文本格式文件格式: proper text format

适当的文本区域样式: proper textarea style

选择文件的不幸结果(此文本格式无法使用编译按钮): my output

完整的 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>

样式.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;
}

用于将文件加载到文本区域的fileUploadScript.js:

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

希望有人能发现哪里做错了。

最佳答案

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]);
})

您不能将代码强行放入文本区域。它只是行不通。您必须使用如上所示的 setValue 方法。

CodeMirror: Usage Manual .

关于javascript - 如何修复 CodeMirror 中的输入问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55942309/

25 4 0
文章推荐： javascript - Angular : total of all country in each row when select option "ALL"
文章推荐： css - 使用 JS 小部件时忽略父样式
文章推荐： css - 为什么在父项上应用 CSS-Filter 会破坏子项定位？
文章推荐： html - 为什么第 nth-child 会选择所有这些？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com