關於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");

            }