关于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");}

转载于:https://www.cnblogs.com/alexkn/p/4812741.html

关于codeMirror插件使用的一个坑相关推荐

VScode 乱装插件环境破坏踩坑自我反思总结
VScode 乱装插件环境破坏踩坑自我反思总结 1.2021-01-18早上由于百度 <Vscode 常用插件推荐>,瞎装了插件,把自己的Vscode环境给破坏了 2.在文件-首选项-设置 ...
vue2项目使用codemirror插件实现代码编辑器功能
1.使用npm安装依赖 npm install --save codemirror 2.在页面中放入如下代码 <template><textarea ref="mycode ...
vue弹窗调用另一个弹窗_电脑桌面“脏乱差”，插件弹窗广告一个不少，学会say no很重要...
Hello大家好,我是兼容机之家的小牛! 很多人买了新电脑,一次性就把很多可能用到的,用不到的软件都装在电脑上,这样不出一会电脑开机就变慢了,C盘容量减少了,反而有可能多了很多垃圾的弹窗. 了解一点电 ...
Go 插件系统，一个凉了快半截的特性？
大家好,我是煎鱼. 在 Go 语言中,有一个好像很好用,但却比较少人提及的功能,那就是 Go Plugin. 目前在 Go 工程中普遍还没广泛的使用起来,覆盖率不高.在 Go issues 上吐槽挺多 ...
PageHelper 插件踩过的坑
PageHelper 插件踩过的坑 PageHelper.startPage(pageNum, pageSize);要紧跟 select 在将集合数据传入pageInfo的时候, 要用有参数的的构造, ...
React中CodeMirror插件的使用及封装
目录一.CodeMirror是什么二.React中CodeMirror的基本使用介绍 (一)引入CodeMirror 1. 安装CodeMirror插件 2.引入 CodeMirror 插件 (二 ...
CodeMirror插件，鼠标光标与代码定位错误BUG处理
大家好,我在开发Z平台时随到一个BUG,在Z平台表单类型中,"源码输入框"类型的字段是使用CodeMirror插件开发完成的,在使用CodeMirror插件时,发现一个BUG,当然 ...
Red 5 中让你猝不及防的一个坑
最近正在做基于 Red 5 的简单开发,之所以说简单,因为没有利用 Red 5 提供的大多数功能接口,只利用其提供的接口来检测一个流媒体源(用的 OBS Studio 16.5)是否连接到服务器上,我 ...
Ionic使用常用插件时遇到的坑与解决方法
一. 什么是Ionic Ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework ). 可以帮助您使用 Web 技术,比如 HTML. ...
困扰多日的C#调用Haskell问题竟然是Windows的一个坑
最近一直被C#调用Haskell时的"尝试读取或写入受保护的内存"问题所困扰(详见C#调用haskell遭遇Attempted to read or write protected ...

关于codeMirror插件使用的一个坑

关于codeMirror插件使用的一个坑相关推荐

最新文章

热门文章