6

我无法弄清楚如何使用该@materia-ui/ngx-monaco-editor库加载自定义 json 模式并用于验证对 monaco 编辑器实例的输入

我一直在关注这里的指南https://levelup.gitconnected.com/autocomplete-json-with-angular-and-monaco-f1dcc01e36e1当然还有lib 的自述文件。

我正在尝试MonacoEditorLoaderService根据他们的文档从库中使用它们并设置 jsonDefaults 的各种诊断选项，如下所示：

constructor(private monacoLoaderService: MonacoEditorLoaderService) {
    this.monacoLoaderService.isMonacoLoaded$
      .pipe(
        filter(isLoaded => isLoaded),
        take(1)
      )
      .subscribe(() => {
        console.log("loaded");
        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
          enableSchemaRequest: true,
          validate: true,
          schemas: [
            // @ts-ignore
            {
              fileMatch: ["file:///schema"], // associate with our model
              schema: {
                type: "object",
                properties: {
                  scopes: {
                    description: "something useful here",
                    type: "array",
                    items: {
                      type: "object",
                      properties: {
                        include: {
                          type: "array",
                          items: [
                            {
                              type: "string"
                            }
                          ]
                        },
                        exclude: {
                          type: "array",
                          items: [
                            {
                              type: "string"
                            }
                          ]
                        },
                        asset_types: {
                          type: "array",
                          items: [
                            {
                              type: "string"
                            }
                          ]
                        }
                      },
                      required: ["include"]
                    }
                  }
                },
                required: ["scopes"]
              }
            }
          ]
        });
      });
  }

Ctrl+Space 只给了我以下$schema选项，并且没有我的架构定义的属性。

在此处输入图像描述

我显然有一些错误配置并误解了如何正确设置模式加载。

我的设置的 Stackblitz 在这里 - https://stackblitz.com/edit/materia-ngx-monaco-editor-example-y2tcrz?file=src/app/app.component.ts

有人可以指出这里的问题是什么，请问我做错了什么？

谢谢

4

1 回答 1

1

最简单的解决方案是在编辑器初始化后设置模型：

  editorInit(editor: MonacoStandaloneCodeEditor) {
    const model = monaco.editor.createModel(
      this.getCode(),
      "json",
      monaco.Uri.parse("a://b/foo.json")
    );
    editor.setModel(model);
  }

这是一个使用 json 模式的 stackblitz 示例：https ://stackblitz.com/edit/materia-ngx-monaco-editor-example-gtgxpy?file=src/app/app.component.ts

话虽如此，首选的方法是使用该模型初始化编辑器，而不是在创建后设置它......但是在检查源代码 ngx-monaco-editor 之后，这种方式是最一致的解决方案。

于 2020-12-16T10:40:31.790 回答