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数据为新值。(问题解决) 

  • 相关阅读:
    python3之Django内置模板标签和过滤器
    JavaScript(1)
    python3之Django基础篇
    CSS
    HTML
    python3之SQLAlchemy
    python3之memcached
    web服务器-nginx虚拟主机
    web服务器-nginx默认网站
    web服务器-Nginx下载限速
  • 原文地址:https://www.cnblogs.com/lsgwr/p/6385220.html
Copyright © 2011-2022 走看看