CodeMirror textarea的多个实例位于同一页面上

Question

我正在尝试为面试问题做一个小项目，并在页面上有一堆问题和答案和代码示例。每个都在Materialise.css的.collapsible div中，当点击时显示答案和代码示例。

最好的方法是什么？我尝试将初始化程序放入一个函数中，从DOM中获取所有textareas，循环遍历它们并将它们转换为CodeMirror textareas。

$(document).ready(function(){

  var blocks = document.getElementsByClassName('code-block');

  function createEditorFrom(selector) {
    let editor = CodeMirror.fromTextArea(selector, {
      lineNumbers : false,
      mode: "swift",
    });
  }

  for (var x = 0; x < blocks.length; x++) {
    createEditorFrom(blocks[x]);
  }

  // Callback for Collapsible open
  $('.collapsible').collapsible({
    onOpen: function() { 
      // call editor.refresh()?
    },
  });

});

这确实有效，但我觉得这不是解决这个问题的一种非常优雅的方式。有一个更好的方法吗？

问题：

1. 有没有更好的方法来创建所有CodeMirror textareas？
2. 编辑器中的代码在单击之前不会显示。我没有做任何事情让它发挥作用。调用editor.refresh（）（使用setTimeout）和autorefresh：true。

Answer 1

无论如何，您必须要做的是保持对CodeMirror实例的引用（例如，获取/设置它们的值），因此createEditorForm必须返回CodeMirror实例，并且您可以例如将它们推送到循环中的数组：

function createEditorFrom(selector) {
  return CodeMirror.fromTextArea(selector, {
    lineNumbers : false,
    mode: "swift",
  });
}

let codeblocks = [];
for (var x = 0; x < blocks.length; x++) {
  codeblocks.push({
     CM: createEditorFrom(blocks[x]), 
     el: blocks[x]
  });
}

我遇到了类似的问题“编辑器中的代码直到点击才出现”，我甚至在解决方案旁边写了一条评论。转换为您的实现，即：

function createEditorFrom(selector) {
  var instance = CodeMirror.fromTextArea(selector, {
    lineNumbers : false,
    mode: "swift",
  });
  // make sure the CodeMirror unit expands by setting a null character
  instance.setValue('\0');
  instance.setValue('');
  return instance;
}

为了它的价值，我还使用了一些CSS调整来确保一致的初始和最大高度渲染：

/* CodeMirror */
.CodeMirror { height: auto; overflow: auto; max-height: 250px; }
.CodeMirror-scroll { height: auto; min-height: 24px; }

有没有更好的方法来创建所有CodeMirror textareas [比通过循环它们]？

是的，你可以懒得初始化它们，如果它们在页面加载时不可见（实际上我认为最好只在<textarea>的父节点可见时初始化它们，我不确定CodeMirror是否需要render-info（如Element.getBoundingClientRect） ），例如只加载他们的可折叠父母的onOpen。

Answer 2

当可折叠打开时，我最终初始化每个。这有效但我想如果在同一个可折叠中有多个CodeMirror textareas，则需要进行调整。

我还添加了一个检查，否则当折叠打开，然后关闭，然后重新打开它将创建一个重复的textarea。

$(document).ready(function(){

  $('.collapsible').collapsible({
    onOpen: createCodeBlock
  });

  function createCodeBlock(target) {
    var card     = target.context.parentElement.parentElement;
    var textarea = card.getElementsByClassName('code-block')[0];

    // Placeholder class that prevents the duplicate creation of
    // the same textarea when the collapsible is closed then reopened.
    if (!textarea.classList.contains("created")) {
      CodeMirror.fromTextArea(textarea, {
        lineNumbers: false,
        mode: "swift",
      });
      textarea.className += "created";
    }
  }

});