Можно ли использовать codemirror для нескольких текстовых областей? - PullRequest
Новая
       44

Можно ли использовать codemirror для нескольких текстовых областей?

13 голосов
/ 18 декабря 2010

Может ли codemirror использоваться более чем на одной текстовой области?Я использую много текстовых областей, которые генерируются динамически. 

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

Я бы предпочел установить класс в текстовой области, чтобы подключить его к codemirror.Является ли это возможным?Другой способ решения этой проблемы - установить несколько идентификаторов.Приведенный выше код устанавливает идентификатор «код» для подключения к codemirror.

Ответы [ 4 ]

24 голосов
/ 23 декабря 2010

На самом деле вы можете сделать несколько вызовов CodeMirror.fromTextArea для нескольких текстовых областей Codemirror-ify.

Если вам нужно несколько текстовых полей с одинаковыми параметрами, оберните вызов Codemirror.fromTextArea в функцию, например: 

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

Затем вы можете применить его к своим текстовым областям, например: 

editor('code1');
editor('code2');
5 голосов
/ 22 января 2017

Может быть кому-нибудь пригодится, прикрепите его к нескольким текстовым областям, используя 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>

Пожалуйста, напишите причину, если проголосовали за ..!

0 голосов
/ 10 июня 2017

Попробуйте это: 

<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>
0 голосов
/ 24 июня 2016

Попробуйте этот код 

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