关于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插件使用的一个坑

最新文章

热门文章