javascript codemirror 可以用于多个文本区域吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4480137/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can codemirror be used on multiple textareas?
提问by Jens T?rnell
Can codemirrorbe used on more than one textarea? I use many textareas that are generated dynamically.
可以codemirror被一个以上的textarea的使用？我使用了许多动态生成的文本区域。
<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.
我更喜欢在 textarea 上设置一个类以将其连接到 codemirror。是否可以？另一种解决方法是设置多个 ID。上面的代码设置ID“code”以连接到codemirror。
回答by alexn
You can actually make multiple calls to CodeMirror.fromTextAreato 'Codemirror-ify' multiple textareas.
您实际上可以多次调用CodeMirror.fromTextArea“Codemirror-ify”多个文本区域。
If you want multiple textareas with the same options, wrap the Codemirror.fromTextAreacall in a function, like:
如果您想要多个具有相同选项的文本区域，请将Codemirror.fromTextArea调用包装在一个函数中，例如：
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');
回答by Muzafar Ali
Might be helpful to somebody, attach it to multiple textareas using html class:
可能对某人有帮助，使用 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>
Please write reason if down voted..!
如果投反对票，请写下原因..！
回答by jameskid
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');
回答by Dinesh Maurya
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>
