在CodeMirror中折叠yaml

Question

有人知道如何为CodeMirror编辑器在yaml文件中添加折叠吗？我们将此编辑器添加到我们的应用程序中，并与json完美配合。但是，当编辑器模式切换为yaml时，文件显示正常，但内部元素未折叠。所以看起来像：

以及它在Ace编辑器中的外观

Answer 1

导入所有内容（我怀疑您错过了foldgutter.css-那就是这个问题的原因）：

<link  href="../lib/codemirror.css" rel="stylesheet" />
<script src="../lib/codemirror.js"></script>
<script src="../mode/yaml/yaml.js"></script>
<link  href="../addon/fold/foldgutter.css" rel="stylesheet" />
<script src="../addon/fold/foldcode.js"></script>
<script src="../addon/fold/foldgutter.js"></script>
<script src="../addon/fold/indent-fold.js"></script>

然后添加适当的init选项：

window.cm = CodeMirror.fromTextArea(textarea, {
    mode: 'yaml',
    styleActiveLine: true,
    lineNumbers: true,
    foldGutter: true,
    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
});

为我工作。