Czy codemirror może być używany w wielu obszarach tekstowych?

Question

Czy można używać codemirror na więcej niż jednym polu tekstowym? Używam wielu tekstów generowanych dynamicznie.

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

Wolałbym ustawić klasę na obszarze tekstowym, aby połączyć ją z codemirror. Czy to możliwe? Innym sposobem rozwiązania byłoby ustawienie wielu identyfikatorów. Powyższy kod ustawia identyfikator "code", aby połączyć się z codemirror.

Answer 1

W rzeczywistości można wykonywać wiele połączeń do CodeMirror.fromTextArea z wieloma tekstami "Codemirror-ify".

Jeśli chcesz kilka pola tekstowe z tych samych opcji, zawinąć wywołanie Codemirror.fromTextArea w funkcji, takich jak:

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

Można wtedy zastosować go do pola tekstowe jak:

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

Answer 2

Try ten kod:

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

mogą być pomocne dla kogoś, dołączyć go do wielu pola tekstowe za pomocą klasy 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> 

Proszę napisać powód, jeśli w dół głosowali ..!

Answer 4

Spróbuj tego:

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