2010-12-18 19 views
11

codemirror एक से अधिक टेक्स्टरेरा पर उपयोग किया जा सकता है? मैं कई textareas का उपयोग करता हूं जो गतिशील रूप से उत्पन्न होते हैं।कई textareas पर codemirror इस्तेमाल किया जा सकता है?

<script type="text/javascript"> 
var editor = CodeMirror.fromTextArea('code', { 
height: "dynamic", 
parserfile: "parsecss.js", 
stylesheet: "codemirror/css/csscolors.css", 
path: "codemirror/js/" 
}); 
</script> 

मैं इसे कोडरिरर से कनेक्ट करने के लिए टेक्स्टरेरा पर एक कक्षा सेट करना पसंद करूंगा। क्या यह संभव है? इसे हल करने का एक और तरीका कई आईडी सेट करना होगा। उपरोक्त कोड कोडमिरर से कनेक्ट करने के लिए आईडी "कोड" सेट करता है।

उत्तर

22

आप वास्तव में CodeMirror.fromTextArea पर 'कोडेमिरर-इफ़ी' एकाधिक टेक्स्टरेज़ में कई कॉल कर सकते हैं।

आप एक ही विकल्प के साथ कई textareas चाहते हैं, एक समारोह में Codemirror.fromTextArea कॉल लपेट, जैसे:

function editor(id) 
{ 
    CodeMirror.fromTextArea(id, { 
     height: "350px", 
     parserfile: "parsexml.js", 
     stylesheet: "css/xmlcolors.css", 
     path: "js/", 
     continuousScanning: 500, 
     lineNumbers: true 
    }); 
} 

फिर आप की तरह अपने textareas में इसे लागू कर सकते हैं:

editor('code1'); 
editor('code2'); 
-1

कोशिश इस कोड को

function getByClass(sClass){ 
    var aResult=[]; 
    var aEle=document.getElementsByTagName('*'); 
    for(var i=0;i<aEle.length;i++){ 
     /*foreach className*/ 
     var arr=aEle[i].className.split(/\s+/); 
     for(var j=0;j<arr.length;j++){ 
      /*check class*/ 
      if(arr[j]==sClass){ 
       aResult.push(aEle[i]); 
      } 
     } 
    } 
    return aResult; 
}; 


function runRender(type){ 
    var aBox=getByClass("code_"+type); 
    for(var i=0;i<aBox.length;i++){ 
     //alert(aBox[i].innerHTML); 
     //var editor = CodeMirror.fromTextArea(document.getElementById("code_javascript"), { 
     var editor = CodeMirror.fromTextArea(aBox[i], { 
      lineNumbers: true, 
      mode: "text/x-csrc", 
      keyMap: "vim", 
      matchBrackets: true, 
      showCursorWhenSelecting: true, 
      theme:"blackboard", 
     }); 
    } 
}; 
runRender('javascript'); 
runRender('c'); 
runRender('java'); 
runRender('bash'); 
2

किसी के लिए उपयोगी हो सकता है, एचटीएमएल वर्ग का उपयोग कर कई textareas के लिए देते:

<textarea class="code"></textarea> 
<textarea class="code"></textarea> 
<textarea class="code"></textarea> 

<script type="text/javascript"> 
function qsa(sel) { 
    return Array.apply(null, document.querySelectorAll(sel)); 
} 
qsa(".code").forEach(function (editorEl) { 
    CodeMirror.fromTextArea(editorEl, { 
    lineNumbers: true, 
    styleActiveLine: true, 
    matchBrackets: true, 
    theme: 'monokai', 
    }); 
}); 
</script> 

कृपया कारण लिखना अगर मतदान किया ..!

+0

धन्यवाद आपकी मदद के लिए एक बहुत। – usertest

0

इस एक का प्रयास करें:

<script> 
var js_editor = document.getElementsByClassName("js_editor"); 
Array.prototype.forEach.call(js_editor, function(el) { 
    var editor = CodeMirror.fromTextArea(el, { 
     mode: "javascript", 
     lineNumbers: true, 
     styleActiveLine: true, 
     theme: 'duotone-light', 
     lineNumbers: true 
     }); 
    // Update textarea 
    function updateTextArea() { 
     editor.save(); 
    } 
    editor.on('change', updateTextArea); 
}); 
</script> 
<textarea class="js_editor"></textarea> 
<textarea class="js_editor"></textarea> 
<textarea class="js_editor"></textarea> 
+0

इसके बजाय 'इसे आजमाएं' समझाएं – Maher

संबंधित मुद्दे

 संबंधित मुद्दे