关于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