在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"],
});

这对我很有效。