codemirror 可以在多个文本区域上使用吗?

Posted

技术标签:

【中文标题】codemirror 可以在多个文本区域上使用吗?【英文标题】:Can codemirror be used on multiple textareas? 【发布时间】:2011-05-27 16:18:27 【问题描述】:

制罐codemirror可以在一个以上的textarea的使用?我使用的是动态生成的许多文本域。 P>

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

我宁愿设置上textarea的一个类将其连接到codemirror。可能吗?解决它是设置多个ID的另一种方式。上述设定代码的ID“代码”连接到codemirror。 P>

【问题讨论】:

【参考方案1】:

您实际上可以多次调用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');

【讨论】:

【参考方案2】:

可能对某人有帮助,使用 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>

如果投反对票,请写下原因..!

【讨论】:

非常感谢您的帮助。 正是我需要的。非常感谢。【参考方案3】:

试试这个代码

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

【讨论】:

以上是关于codemirror 可以在多个文本区域上使用吗?的主要内容,如果未能解决你的问题,请参考以下文章

是否可以在 Mobile Safari 中使用 Javascript 在输入或文本区域上调用键盘?

Robot Selenium - 在 CodeMirror 文本区域中输入文本

如何在 IE 中禁用的文本区域上启用滚动条

从 Jquery Ajax 调用中设置 CodeMirror 文本区域的值

TinyMCE 在动态生成的文本区域上不可点击和编辑

在 GUI 文本区域上添加和刷新文本?