Kann Codemirror auf mehreren Textfeldern verwendet werden?

Question

Kann codemirror in mehr als einem Textfeld verwendet werden? Ich benutze viele Textfelder, die dynamisch generiert werden.

Ich würde es vorziehen, eine Klasse auf dem Textarea zu setzen, um es mit Codemirror zu verbinden. Ist es möglich? Die andere Möglichkeit, es zu lösen, wäre, mehrere IDs zu setzen. Der obige Code setzt den ID- "Code" für die Verbindung zum Codemirror.

Answer 1

Sie können tatsächlich mehrere Anrufe zu CodeMirror.fromTextArea zu ‚Codemirror-ify‘ mehrere Textfelder machen.

Wenn Sie mehrere Textfelder mit den gleichen Optionen wollen, wickeln Sie das Codemirror.fromTextArea Anruf in einer Funktion, wie:

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

Sie können es dann gelten für Ihre Textbereiche wie:

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

Answer 2

Try Dieser Code

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

könnte hilfreich sein, um jemanden, hängen Sie es an mehrere Textfelder html-Klasse:

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

Bitte schreiben Grund, wenn unten gestimmt ..!

Answer 4

Versuchen Sie dieses:

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