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

Question

我想在Codemirror编辑器中添加标签，通过标签的切换就能拥有多个编辑器。

我得到了这个基本的实现工作，但无法取得任何进展。https:/codepen.iomottox2penwmGopW。

CodeMirror手册上说要这样做https:/codemirror.netdocmanual.html#api_doc。

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

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

Answer 1

不知道这是否回答了你的问题，这是你要找的吗？CodePen示例

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

使用循环定义多个编辑器，创建一些标签来隐藏显示每个编辑器。