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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CodeMirror - 在页面加载时在编辑器上加载文件相关的知识,希望对你有一定的参考价值。

我想在页面加载时在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>

以上是关于CodeMirror - 在页面加载时在编辑器上加载文件的主要内容,如果未能解决你的问题,请参考以下文章

codemirror angularjs 多文件自适应高亮编辑

我怎样才能摆脱 CodeMirror div ?为啥我有它?

当我使用 CodeMirror 在 TextArea 中编辑代码时,如何使用 js 或 jQuery 将其反映到另一个 textarea 中

codemirror输入反应慢

在线代码编辑器CodeMirror简介

用codemirror实现一个自己的简单hive ql编辑器