在使用codemirror時，
其原理是根據form中的textarea標簽，自動加載其內容，獲得代碼行的顯示。（具體使用方式參見 codemirror官網使用手冊 http://codemirror.net/doc/manual.html）
優點顯而易見，
在codemirror中，修改了一部分代碼，在form表單提交時，codemirror會自動調用其內部的save()方法，將codemirror中的新值，更新至textarea中，進行表單提交。
然而當我們用js動態加載文件，修改后對文件進行保存時出現了出乎意料的情況。
<script> var editor = null; function loadfile(){ var fileName = $('#file-selector').val(); $.get("/load-file?file-name=" + fileName, function(data) { $('#lispcode').empty(); $('#lispcode').text(data); $('.CodeMirror').remove(); editor = CodeMirror.fromTextArea(document.getElementById(\"lispcode\"), {lineNumbers: true}); }); } </script> <form> <select id="file-selector" onchange="loadfile()"> <option>1</option> <option>2</option> </select> <textarea id="lispcode">xxx</textarea> </form> <script>editor = CodeMirror.fromTextArea(document.getElementById("lispcode"), {lineNumbers: true}); </script> //寫在textarea之后，加載textarea內容
上述動態load文件的代碼可以正常顯示，但是load過后，修改代碼仍然提交的是原來第一次load出來文件的代碼。
問題原因： 修改的代碼沒有正常更新到textarea，以至於form提交時，仍然更新的是原來的舊值。
分析：1. 上述代碼在動態load文件內容時，會生成一個新的codemirror實例，但是在form提交時，仍然使用的是初始對象的value值。
思路：1. 由於codemirror在初始化時，會創建一個實例，所以重新加載時考慮銷毀舊實例，創建新實例。
解決方案：
editor.toTextArea(); $('#lispcode').empty(); $('#lispcode').text(data); $('.CodeMirror').remove(); editor = CodeMirror.fromTextArea(document.getElementById(\"lispcode\"), {lineNumbers: true});
效果：動態load文件，codemirror不更新。。。
分析：2. 可否動態刷新codemirror中的值
思路：2. 設置codemirror的值
解決方案：
$.get("/load-file?file-name=" + fileName, function(data) { $('#lispcode').empty(); $('#lispcode').text(data); editor.getDoc().setValue(data); editor.refresh(); });
效果：動態load文件，codemirror更新，表單提交時，textarea數據為新值。（問題解決）