FileReader and CodeMirror Load File Complication

Question

Default CodeMirror HTML Editor with Preview - http://jsfiddle.net/D9MvH/1/ - http://liveweave.com/zSqCfA

Load File in CodeMirror with FileReader API - http://livewea

Answer 1

You're simply misusing CodeMirror; when the file content is loaded into the reader, instead of assigning a value to the textarea element, e.g.:

reader.onload = function(e) {
    document.getElementById('code').value = e.target.result;
}

… use the CodeMirror API and insert content via the editor instance setValue() method, like so:

reader.onload = function(e) {
    editor.setValue(e.target.result);
}

See the CodeMirror docs for doc.setValue(content: string), and here's the updated, working demo illustrating this.

Answer 2

Here is sample example.

<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>

The above one is done for div. If you wanted for textarea, change it like:

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

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