javascript - Can codemirror be used on multiple textareas? - Stack Overflow

admin管理员组

文章数量:1178539

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.

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.

• javascript
• textarea
• editor
• codemirror

Share Improve this question Follow edited Aug 29, 2016 at 20:53 Ram 3,0911010 gold badges4242 silver badges5757 bronze badges asked Dec 18, 2010 at 20:58 Jens TörnellJens Törnell 24.7k4646 gold badges130130 silver badges221221 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 27

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

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

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

本文标签： javascriptCan codemirror be used on multiple textareasStack Overflow