CODEWITHSUNDEEP
javascripttextareaeditorcodemirror
Jens Törnell
Jens Törnell

Reputation: 24768

Can codemirror be used on multiple textareas?

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.

Upvotes: 17

Views: 13808

Answers (3)

Muzafar Ali
Muzafar Ali

Reputation: 1452

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

Upvotes: 9

jameskid
jameskid

Reputation: 11

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

Upvotes: 1

alexn
alexn

Reputation: 58962

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

Upvotes: 27

Related Questions