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

Question

我有一个 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

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

Answer 1

您错过了导入以下两个

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

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

编码愉快

Answer 2

您需要在您的模块中添加

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

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

ngx-codemirror - Unable to use fold gutter in XML Message

javascript

codemirror

angular

angular8