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数据为新值。(问题解决)
CodeMirror动态修改代码(关键: editor.getDoc().setValue(data); editor.refresh();)的更多相关文章
- Java Agent初探——动态修改代码
用了一下午总算把java agent给跑通了,本篇文章记录一下具体的操作步骤,以免遗忘... 通过java agent可以动态修改代码(替换.修改类的定义),进行AOP. 目标: ? 1 为所有添加@ ...
- Easyui Datagrid 的Combobox 如何动态修改下拉选项,以及值的转换
我是先将下拉选项的值通过datagrid的url查出来了,在每一行的row中 //项目结果选项卡的列表 $('#project_table').datagrid({ width : ...
- 微信小程序——动态修改页面数据(和样式)及参数传递
1.1.1动态修改页面数据 在小程序中我们经常要动态渲染数据,对于新手而言我们常常遇到修改的数据在控制台显示和页面显示不一致,因为我们用“=”修改数据的,这种是可以修改,但无法改变页面的状态的,还会造 ...
- 小程序block标签配合if和else 和 动态修改标题栏
<block wx:if="{{aaaa}}"> <view>aaaa为 true,显示</view> </block> <b ...
- easyui datagrid动态修改editor时动态绑定combobox的数据
需求在 datagrid 编辑框中开启一个combobox ,但是里面的数据需要开启的时候才会知道,数据会根据其他因数变更 参考原文 :http://blog.csdn.net/donggua369 ...
- Unity3D代码动态修改材质球的颜色
代码动态修改材质球的颜色: gameObject.GetComponent<Renderer>().material.color=Color.red;//当材质球的Shader为标准时,可 ...
- 自修改代码 on the fly 动态编译 即时编译 字节码
https://zh.wikipedia.org/wiki/自修改代码 自修改代码(Self-modifying code)是指程序在运行期间(Run time)修改自身指令.可能的用途有:病毒利用此 ...
- 关于Unity中如何代码动态修改天空盒
在Unity中动态修改天空盒有两种方法: 一.为每个Texture建立天空盒材质球,需要更换时直接将对应材质球作为天空盒,缺点是建立的材质球太多 private void ChangeSkybox(M ...
- 动态修改 C 语言函数的实现
Objective-C 作为基于 Runtime 的语言,它有非常强大的动态特性,可以在运行期间自省.进行方法调剂.为类增加属性.修改消息转发链路,在代码运行期间通过 Runtime 几乎可以修改 O ...
随机推荐
- 反向传播(Back Propagation)
反向传播(Back Propagation) 通常在设计好一个神经网络后,参数的数量可能会达到百万级别.而我们利用梯度下降去跟新参数的过程如(1).但是在计算百万级别的参数时,需要一种有效计算梯度的方 ...
- Java——接口、匿名类
接口语法 public interface Demolnteface{ public void demo(): //其他方法 //所有方法都是抽象的 } 接口里放: 1.静态常量 (一般全部大写) 2 ...
- 深入理解java虚拟机,GC参考手册
深入理解java虚拟机 一.<深入理解Java虚拟机> 1.第2章 Java内存区域与内存溢出异常 2.第3章 垃圾收集器与内存分配策略 3.第4章 虚拟机性能监控与故障处理工具 4.第5 ...
- java架构《并发线程高级篇四》
本章主要讲并发线程的常见的两种锁.重入锁和读写锁 一:重入锁(ReentrantLock) 概念:重入锁,在需要进行同步的代码加锁,但最后一定不要忘记释放锁,否则会造成锁永远不能释放,其他线程进不了 ...
- ubuntu 安装新版的qq,可支持下载文件等常用功能
说明:此版本的QQ基本完美,但是有个缺点就是历史记录有些会显示乱码! 注意:此方法能完美解决这篇文章http://www.cnblogs.com/EasonJim/p/7118693.html的所有问 ...
- zabbix监控设备结果异常问题
1.现象描述 paloalto防火墙升级后发现zabbix监控其CPU.风扇等硬件信息和端口流量数据错误. 2.现象分析 由于zabbix并没有做过任何调整,防火墙也只是升级.根据现象并不好排查.但是 ...
- Joomla 3.4.6 RCE复现及分析
出品|MS08067实验室(www.ms08067.com) 本文作者:whojoe(MS08067安全实验室SRST TEAM成员) 前言 前几天看了下PHP 反序列化字符逃逸学习,有大佬简化了一下 ...
- 如何在windows上升级Powershell到5.1版本?
前言 此篇我们说的是Powershell5.1低版本到5.1的升级,对于Powershell6(及以上版本)可以跨平台独立安装,在windows上可与之前的版本并存. 首先要整清楚Powershell ...
- jmespath(2)投影Projections
投影 投影是JMESPath的关键特性之一.它允许您将表达式应用于元素集合.有五种投影: 列表投影 切片投影 对象投影 展平投影 过滤投影 处理投影需要注意的点 投影评估分为两个步骤.左侧(LHS)创 ...
- jenkins:实现Jenkinsfile与Json的转换
实现Jenkinsfile与Json的转换 目录 实现Jenkinsfile与Json的转换 方法1:使用现有的jenkins插件 参考 方法2:解析原生的jenkinsfile文件 参考 最近在做个 ...