ngx-codemirror - 无法在 XML 消息中使用折叠装订线答案

【问题标题】：ngx-codemirror - Unable to use fold gutter in XML Messagengx-codemirror - 无法在 XML 消息中使用折叠装订线
【发布时间】：2020-02-13 10:41:19
【问题描述】：

我有一个 Angular 应用程序，我正在使用 ngx-codemirror 在我各自的应用程序中构建一个代码镜像。在 ngx-codemirror 中有一个名为 foldgutter 的选项，我已经做到了。

app.component.ts

  public codeMirrorOptions: any = {
    theme: 'material',
    lineNumbers: true,
    lineWrapping: true,
    foldGutter: true,
    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
    autoCloseBrackets: true,
    matchBrackets: true
  };

app.component.html

  <ngx-codemirror [(ngModel)]="selectedMessageBody"
                                        [options]="codeMirrorOptions">
                        </ngx-codemirror>

通过设置相应的值，如果消息是 JSON，我可以使用折叠装订线，但如果是 XML，则文件夹装订线选项不可见。

我不确定我错过了什么。

STACKBLITZ 演示 => https://stackblitz.com/edit/ngx-codemirror-dmo9cy

还有其他软件包可以解决这个问题吗？

【问题讨论】：

你想达到什么目的？
@Sajeetharan 我可以在 JSON 消息中使用折叠装订线，但它没有显示在 XML 消息中

标签： javascript angular angular8 codemirror

【解决方案1】：

你需要在你的模块中添加

import 'codemirror/mode/xml/xml';
import 'codemirror/addon/fold/xml-fold';

并将 app.component 选项更改为

<ngx-codemirror #codemirrorr
   [options]="{
    lineNumbers: true,
    theme: 'idea',
    mode: 'application/xml',
     gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
    foldGutter: true,
     autoCloseBrackets: true,
    matchBrackets: true,
    lineWrapping: true,
    lint: true
  }"
  [(ngModel)]="xmlString"
  (ngModelChange)="setEditorContent($event)">
</ngx-codemirror>

STACKBLITZ DEMO

【讨论】：

感谢 Sajeetharan 的回答。 :)
大家好，这个代码折叠是否适用于小黄瓜模式？

【解决方案2】：

您错过了导入以下两个

import 'codemirror/mode/xml/xml';
import 'codemirror/addon/fold/xml-fold';

您还需要在codeMirrorOptions 下设置mode:xml。通常人们的错误是使用application/xml，我的朋友也是这样:)

快乐编码

【讨论】：

我认为你速度很快，我正在尝试为它创建一个演示
@Sajeetharan 纯属运气：D