CodeMirror动态修改代码(关键: editor.getDoc().setValue(data); editor.refresh();)
在使用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数据为新值。(问题解决)