zoukankan      html  css  js  c++  java
  • 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数据为新值。(问题解决) 

  • 相关阅读:
    ReverseFind的用法 ; 查找字符中最后一个字符
    sprintf_s() 、sprintf()和printf()区别和用法
    CString/string 区别及其转化
    CC++中strcat()函数
    C++中cstring.h和string.h的区别
    vs中CString的用法,以及所需的头文件
    头文件afx.h作用
    sprintf_s函数用法
    C++ format 函数
    C/C++ typedef用法
  • 原文地址:https://www.cnblogs.com/lsgwr/p/6385220.html
Copyright © 2011-2022 走看看