您将如何使用 Codemirror 文档来获得多个编辑器？

【问题标题】：How would you use Codemirror documents to get multiple editors?您将如何使用 Codemirror 文档来获得多个编辑器？
【发布时间】：2023-04-10 07:34:01
【问题描述】：

我正在尝试将选项卡添加到 Codemirror 编辑器，以便通过切换选项卡来拥有多个编辑器。

我得到了这个基本实现，但没有任何进展https://codepen.io/mottox2/pen/wmGopW

CodeMirror 手册说要这样做 https://codemirror.net/doc/manual.html#api_doc

CodeMirror.Doc(text: string, mode: Object, firstLineNumber: ?number, lineSeparator: ?string)

但我不知道该把那行代码放在哪里

【问题讨论】：

该行为定义的编辑器创建了一个新文档。如果你想在一个页面中有多个编辑器，那么你需要使用循环定义多个编辑器。

标签： javascript codemirror

【解决方案1】：

不确定这是否能回答您的问题，这是您要找的吗？ CodePen Example

var editors = document.getElementsByClassName('editor');
for (var i = 0; i < editors.length; i++) {
  var self = editors[i];
  var editor = CodeMirror.fromTextArea(self, {
    mode: "javascript",
    lineNumbers: true,
    autoRefresh: true
  });
  editor.save();
}

var tabs = document.querySelectorAll('.tab');

for (var i = 0; i < tabs.length; i++) {
  var self = tabs[i];
  self.addEventListener('click', function() {
    var data = this.getAttribute('data-tab');
    document.querySelectorAll('.tab-pane.active')[0].classList.remove('active');
    document.querySelectorAll('.tab-pane[data-pane="'+data+'"]')[0].classList.add('active');
    document.querySelectorAll('.tab.active')[0].classList.remove('active');
    this.classList.add('active');
  });
}

使用循环定义多个编辑器，创建一些选项卡来隐藏/显示每个编辑器。

【讨论】：