关于codeMirror插件使用的一个坑
codeMirror插件可以做语法高亮渲染,但它操作过程是这样的:先从 textarea中读取值放到codemirror动态生成的div中,根据textarea中的换行个数确定行数,根据正则表达来高亮语法。这就有个问 题,当你在页面上对语法做出修改提交表单时,其实只是在codemirror上的动态div上做出修改,当form表单提交时,原来textarea值并 没有变化。
所以,解决办法如下
1.需要在表单提交之前将textarea渲染的editor对象的值给读取出来,反写到textarea上去。
2.使用一个onchange事件,在渲染的div值出现变化时,反写到textarea上去。
(1) ids为textarea的id,jeditor_obj 为针对textarea渲染的对象
var ids = ['globalValueId','readyFlowId','mainFlowId','clearFlowId','exceptionFlowId'];
var globalValueId_Editor = new Object();
var readyFlowId_Editor = new Object();
var mainFlowId_Editor = new Object();
var clearFlowId_Editor = new Object();
var exceptionFlowId_Editor = new Object();
var jeditor_obj = [globalValueId_Editor,readyFlowId_Editor,mainFlowId_Editor,clearFlowId_Editor,exceptionFlowId_Editor];
(2) 各个语法高亮的editor对象
/* 语法高亮 */
for(var i=0;i<ids.length;i++){
jeditor_obj[i] = CodeMirror.fromTextArea(document.getElementById(ids[i]),
{
lineNumbers : true,
matchBrackets : true,
mode : "text/x-java",
});
}
(3) 红色部分为提交前将值反写回textarea的操作
submitHandler : function(form) {
for(var i=0;i<ids.length;i++){
$("#"+ids[i]).val(jeditor_obj[i].getValue());
}
getPost("business/mergeFlowAction");
}
关于codeMirror插件使用的一个坑的更多相关文章
- 在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示
在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示) 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 ...
- inno setup读取注册表遇到的一个坑
一.背景 目前,公司针对PR开发的一个插件需要发布到64位系统上.该插件包括一个prm格式的文件和若干个DLL文件.其中,prm文件需要复制到PR公共插件目录下,DLL需要复制到Windows系统目录 ...
- 360插件化Replugin爬坑之路
前言 继上次爬完了热修复的坑位,中途爬了各种各样的坑.今天我们来说说插件化Replugin的坑位.Replugin刚出的时候我就看过了.第一次看的时候可能心态不好.没看懂= =第二次重头在看,发现蛮简 ...
- Composer安装php插件包中有哪些坑
Composer安装php插件包中有哪些坑 一.总结 一句话总结:不要盲从扩展官方的composer安装命令,有时候也会出错 我们经常要往现有的项目中添加扩展包,有时候因为文档的错误引导,如下图来自 ...
- 8.maven上传jar包以及SNAPSHOT的一个坑
1,手动上传包 如何将一些新的外部包上传到私服当中呢? 首先是要登录上去,然后点击 Upload,找到 maven-local将jar包找到选中,然后填写对应的三个定位信息即可上传. 在引用的时候,道 ...
- 用html5的视频元素所遇到的第一个坑
html5 有一个video标签,这个是被大家所熟知的事情.按照w3c的规范,我认真的写出如下代码: <video preload="auto" controls=" ...
- 监控jvm的一个坑
监控jvm的一个坑 1,遇到的问题 我按照以往文档,在catalina.sh里追加jvm的监控api,如下 紧接着我启动 tomcat. 未报任何错误. 发现 lsof –i:12000, 12000 ...
- codeMirror插件使用讲解
codeMirror是一款十分强大的代码编辑插件,提供了十分丰富的API,最近在项目中用到了这款插件,于是在这里给大家分享下使用方法和心得: codeMirror调用非常方便 首先在页面中载入插件CS ...
- JavaScript中sort方法的一个坑(leetcode 179. Largest Number)
在做 Largest Number 这道题之前,我对 sort 方法的用法是非常自信的.我很清楚不传比较因子的排序会根据元素字典序(字符串的UNICODE码位点)来排,如果要根据大小排序,需要传入一个 ...
随机推荐
- ios8版本地图定位注意点
学习ios地图定位 我先定义一个属性: @property (weak, nonatomic) IBOutlet MKMapView *mapV; 然后在项目运行时初始化该属性一些参数: //设置地图 ...
- Android 采用get方式提交数据到服务器
首先搭建模拟web 服务器,新建动态web项目,servlet代码如下: package com.wuyudong.web; import java.io.IOException; import ja ...
- iOS通用的MVC模式项目框架MobileProject
最近项目比较不赶的情况下,决定把一些通用.常用的内容集成在一个项目框架中,意在新项目中可以快速搭建:其实经过几个项目后,总是有一些重复的创建工作,可以使用本项目的内容直接进行开发:采用的是MVC的分层 ...
- Java中的查找算法之顺序查找(Sequential Search)
Java中的查找算法之顺序查找(Sequential Search) 神话丿小王子的博客主页 a) 原理:顺序查找就是按顺序从头到尾依次往下查找,找到数据,则提前结束查找,找不到便一直查找下去,直到数 ...
- CSS 行内样式 页内样式 外部样式
行内标签: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...
- 关于Android四大组件的学习总结
Activity Android应用的用户界面是由Activity类管理的.和其他组件一样,Activity会用一系列生命周期回调函数通知当前的状态. 生命周期 Activity的四种状态 1.运行状 ...
- RDVTabBarController的基本使用 以及tabbar的防止双点击方法
RDVTabBarController这个库写得相当不错,所以今天就简单介绍下它的基本使用,看里面可以清楚的知道代码规范的重要性,这个库的使用方法和官方的相识 下载地址:https://github. ...
- Content-Type: application/vnd.ms-excel">
如果要将查询结果导出到Excel,只需将页面的Context-Type修改一下就可以了: header( "Content-Type: application/vnd.ms-excel& ...
- JSP中request getParameter和getAttribute不同(转载)
(1)request.getParameter()取得是通过容器的实现来取得通过类似post,get等方式传入的数据,,request.setAttribute()和getAttribute()只是在 ...
- 【转发】NPAPI学习(Firefox和Chrome扩展开发 )
NPAPI学习(Firefox和Chrome扩展开发 ) 2011-11-08 14:41:02 by [6yang], 1172 visits, 收藏 | 返回 Firefox和Chrome扩展开发 ...