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

CodeMirror动态修改代码(关键: editor.getDoc().setValue(data); editor.refresh();)的更多相关文章

  1. Java Agent初探——动态修改代码

    用了一下午总算把java agent给跑通了,本篇文章记录一下具体的操作步骤,以免遗忘... 通过java agent可以动态修改代码(替换.修改类的定义),进行AOP. 目标: ? 1 为所有添加@ ...

  2. Easyui Datagrid 的Combobox 如何动态修改下拉选项,以及值的转换

    我是先将下拉选项的值通过datagrid的url查出来了,在每一行的row中 //项目结果选项卡的列表    $('#project_table').datagrid({        width : ...

  3. 微信小程序——动态修改页面数据(和样式)及参数传递

    1.1.1动态修改页面数据 在小程序中我们经常要动态渲染数据,对于新手而言我们常常遇到修改的数据在控制台显示和页面显示不一致,因为我们用“=”修改数据的,这种是可以修改,但无法改变页面的状态的,还会造 ...

  4. 小程序block标签配合if和else 和 动态修改标题栏

    <block wx:if="{{aaaa}}"> <view>aaaa为 true,显示</view> </block> <b ...

  5. easyui datagrid动态修改editor时动态绑定combobox的数据

    需求在 datagrid 编辑框中开启一个combobox  ,但是里面的数据需要开启的时候才会知道,数据会根据其他因数变更 参考原文 :http://blog.csdn.net/donggua369 ...

  6. Unity3D代码动态修改材质球的颜色

    代码动态修改材质球的颜色: gameObject.GetComponent<Renderer>().material.color=Color.red;//当材质球的Shader为标准时,可 ...

  7. 自修改代码 on the fly 动态编译 即时编译 字节码

    https://zh.wikipedia.org/wiki/自修改代码 自修改代码(Self-modifying code)是指程序在运行期间(Run time)修改自身指令.可能的用途有:病毒利用此 ...

  8. 关于Unity中如何代码动态修改天空盒

    在Unity中动态修改天空盒有两种方法: 一.为每个Texture建立天空盒材质球,需要更换时直接将对应材质球作为天空盒,缺点是建立的材质球太多 private void ChangeSkybox(M ...

  9. 动态修改 C 语言函数的实现

    Objective-C 作为基于 Runtime 的语言,它有非常强大的动态特性,可以在运行期间自省.进行方法调剂.为类增加属性.修改消息转发链路,在代码运行期间通过 Runtime 几乎可以修改 O ...

随机推荐

  1. 大型面试现场:一条update sql执行都经历什么?

    导读 Hi,大家好!我是白日梦!本文是MySQL专题的第 24 篇. 今天我要跟你分享的MySQL话题是:"从一条update sql执行都经历什么开始,发散开一系列的问题,看看你能抗到第几 ...

  2. Html5 部分快捷键

    1:Tab键,快速创建标签 2:ctrl+d,删除光标所在行 3; ctrl+/ 快速添加注释 ctrl+shirt+/ 快速添加多行注释,在js里分别为添加单行注释和多行注释 4; ctrl+alt ...

  3. 函数式编程(logging日志管理模块)

    本节内容 日志相关概念 logging模块简介 使用logging提供的模块级别的函数记录日志 logging模块日志流处理流程 使用logging四大组件记录日志 配置logging的几种方式 向日 ...

  4. 【疑】checkpoint防火墙双链路负载均衡无法配置权重问题

    现状: 按照上一篇checkpoint疑难中描述,已完成双机+双链路冗余配置 故障现象: 外网出口为200M电信+200M联通,CP上负载权重设置如下 但是在实际使用中发现电信出口流量远大于联通. 调 ...

  5. VScode 连接虚拟机

    VScode 连接虚拟机 在VScode上面使用SSH连接虚拟机,编写代码以及运行都将会方便许多 打开VScode,安装Remote-SSH插件 配置SSH连接信息 点击左侧第四个图标,然后单击设置按 ...

  6. 【uva 534】Frogger(图论--最小瓶颈路 模版题)

    题意:平面上有N个石头,给出坐标.一只青蛙从1号石头跳到2号石头,使路径上的最长便最短.输出这个值.(2≤N≤200) 解法:最小瓶颈树.而由于这题N比较小便可以用2种方法:1.最短路径中提到过的Fl ...

  7. 2. Linear Regression with One Variable

    Speaker:Andrew Ng 这一次主要讲解的是单变量的线性回归问题. 1.Model Representation 先来一个现实生活中的例子,这里的例子是房子尺寸和房价的模型关系表达. 通过学 ...

  8. 前、中、后序遍历随意两种是否能确定一个二叉树?理由? && 栈和队列的特点和区别

    前序和后序不能确定二叉树理由:前序和后序在本质上都是将父节点与子结点进行分离,但并没有指明左子树和右子树的能力,因此得到这两个序列只能明确父子关系,而不能确定一个二叉树. 由二叉树的中序和前序遍历序列 ...

  9. 通过k8s部署dubbo微服务并接入ELK架构

    需要这样一套日志收集.分析的系统: 收集 -- 能够采集多种来源的日志数据 (流式日志收集器) 传输 -- 能够稳定的把日志数据传输到中央系统 (消息队列) 存储 -- 可以将日志以结构化数据的形式存 ...

  10. leetcode一些细节

    取数组中点时不要写 int mid = (left + right) // 2;,「这么写有一个问题:数值越界,例如left和right都是最大int,这么操作就越界了,在二分法中尤其需要注意!」 所 ...