CodeMirror - 在页面加载时在编辑器上加载文件

Posted 2021-03-26

我想在页面加载时在Codemirror编辑器内部加载本地文件，我尝试使用FilerReader API但没有成功。我也尝试使用jquery .load（）函数，但我只能在通用textarea中加载文件，而不是在编辑器中。

答案

页面加载可能会在初始化codemirror之前等待数据请求完成

因为提到的jQuery会以它为例

$(function(){
    $.get('path/to/codefile',  function(data){
          $('textarea#editorId').val(data);
          // now init codemirror 
    })

})

另一答案

您可以像以前一样将内容加载到<textarea>，然后使用CodeMirror-method初始化CodeMirror.fromTextArea实例。

var myTextArea = document.getElementById("myTextArea");
var myCodeMirror = CodeMirror.fromTextArea(myTextArea{
  lineNumbers: true,
  mode: "javascript"
});

有关更多信息，请参阅Basic Usage on CodeMirror documentation

另一答案

以下是代码示例：

<script src="codemirror/lib/codemirror.js"></script>
<link rel="stylesheet" href="codemirror/lib/codemirror.css"/>
<script src="codemirror/mode/clike/clike1.js"></script>
<script src="codemirror/mode/javascript/javascript.js"></script>

<div id="editor"> </div>
<div>
    <input type="file" onchange="localLoad(this.files);" />
</div>

<script>
   var myCodeMirror = CodeMirror(
   document.getElementById('editor'), {
      lineNumbers: true
   });

   function localLoad(files) {
       if (files.length == 1) {
            document.title = escape(files[0].name);
            var reader = new FileReader();
            reader.onload = function(e) {
              myCodeMirror.setValue(e.target.result);
            };
            reader.readAsText(files[0]);
         }
    }
</script>

以上是为div完成的。如果您想要textarea，请将其更改为：

<textarea id="editor" name="field1"></textarea>

 <script>
 var myCodeMirror = CodeMirror.fromTextArea
  document.getElementById('editor'),{
  lineNumbers: true
   });
   myCodeMirror.setSize(null, 600);
 </script>