¿Se puede usar el codemirror en múltiples áreas de texto?

Question

¿Se puede usar codemirror en más de un área de texto? Utilizo muchas textareas que se generan dinámicamente.

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

Preferiría configurar una clase en el área de texto para conectarlo a codemirror. ¿Es posible? La Otra forma de resolverlo sería establecer múltiples ID. El código anterior establece el "código" de ID para conectarse a codemirror.

Answer 1

En realidad, puede realizar varias llamadas a CodeMirror.fromTextArea a 'Codemirror-ify' en múltiples áreas de texto.

Si desea que varias áreas de texto con las mismas opciones, envuelva la llamada Codemirror.fromTextArea en una función, como:

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

Luego, puede aplicarla a sus áreas de texto como:

editor('code1'); 
editor('code2'); 

Answer 2

Try este código

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'); 

Answer 3

podría ser útil a alguien, adjuntarlo a múltiples áreas de texto usando la clase html:

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

Por favor introduzca razón, si votó abajo ..!

Answer 4

prueba este:

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