CodeMirror

Question

我想在页面加载时在 Codemirror 编辑器中加载一个本地文件，我尝试使用 FilerReader API 但没有成功。我还尝试使用 jquery .load() 函数，但我只能在通用文本区域而不是在编辑器中加载文件。

Answer 1

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

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

有关详细信息，请参阅 Basic Usage on CodeMirror documentation

Answer 2

页面加载可以等待数据请求完成，然后再初始化 codemirror

既然提到了jQuery就拿它举例

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

})

Answer 3

这是代码示例：

<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 id="editor" name="field1"></textarea>

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

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

CodeMirror - load file on editor on page load

javascript

pageload

filereader