CodeMirror动态加载和表单提交

在使用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数据为新值。（问题解决）