Can codemirror be used on multiple textareas?

Question

Can codemirror be used on more than one textarea? I use many textareas that are generated dynamically.

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

I would prefer setting a class on the textarea to connect it to codemirror. Is it possible? The Another way of solving it would be to set multiple IDs. The code above sets the ID "code" to connect to codemirror.

Answer 1

You can actually make multiple calls to CodeMirror.fromTextArea to 'Codemirror-ify' multiple textareas.

If you want multiple textareas with the same options, wrap the Codemirror.fromTextArea call in a function, like:

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

You can then apply it to your textareas like:

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

Answer 2

Might be helpful to somebody, attach it to multiple textareas using html class:

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

Please write reason if down voted..!

Answer 3

Try this 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 4

Try this one:

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