Monaco-Editor

С чего начать

Установите monaco-editor следующей командой:

npm install monaco-editor @diasoft/ngx-monaco-editor --save

Чтобы сделать библиотеку monaco-editor доступной для приложения, добавьте в assets вашегоangular.jsonв разделprojects.[project-name].architect.buildследующее:

{
  "options": {
    {
      "assets": [
        {
          "glob": "**/*",
          "input": "node_modules/monaco-editor",
          "output": "assets/monaco-editor"
        }
      ],
      ...
    }
    ...
  },
  ...
}

Включите Monaco Editor Module в основной модуль и функциональные модули, в которых вы хотите использовать компонент редактора, например: app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
 
import { AppComponent } from './app.component';
import { MonacoEditorModule } from '@diasoft/ngx-monaco-editor';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    MonacoEditorModule.forRoot() // use forRoot() in main app module only.
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Создайте опции и привязки ngModel редактора в компоненте:

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  editorOptions = {theme: 'vs-dark', language: 'javascript'};
  code: '''YOUR CODE''';
}

Включите редактор в html с опциями и привязками ngModel:

<ngx-monaco-editor [options]="editorOptions" [(ngModel)]="code"></ngx-monaco-editor>

Diff-editor

Включите редактор различий в html с опциями и необходимыми привязками:

<ngx-monaco-diff-editor
  [options]="options"
  [originalModel]="originalModel"
  [modifiedModel]="modifiedModel"

Стилизация

Чтобы редактор соответствовал высоте контейнера, добавьте height: 100% и заверните редактор в контейнер:

<div style="height: 400px">
  <ngx-monaco-editor style="height: 100%" [options]="editorOptions" [(ngModel)]="code"></ngx-monaco-editor>
</div>

Добавьте редактору класс, напримерmy-code-editorи добавьте необходимые стили в css/scss файл:

<ngx-monaco-editor
  class="my-code-editor"
  [options]="editorOptions"
  [(ngModel)]="code"
></ngx-monaco-editor>

События

<ngx-monaco-editor
  [options]="editorOptions"
  [(ngModel)]="code"
  (onInit)="onInit($event)"
></ngx-monaco-editor>

Конфигурация

МетодforRoot()принимает конфигурацию типаNgxMonacoEditorConfig.

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
 
import { MonacoEditorModule, NgxMonacoEditorConfig } from '@diasoft/ngx-monaco-editor';
import { AppComponent } from './app.component';
 
const monacoConfig: NgxMonacoEditorConfig = {
  baseUrl: 'app-name/assets', // configure base path cotaining monaco-editor directory after build default: './assets'
  defaultOptions: { scrollBeyondLastLine: false }, // pass default options to be used
  onMonacoLoad: () => { console.log((<any>window).monaco); } // here monaco object will be available as window.monaco use this function to extend monaco editor functionalities.
};
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    MonacoEditorModule.forRoot(monacoConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Настройка дефолтного JSON

СвойствоonMonacoLoadможет быть использовано для конфигурации дефолтного JSON.

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
 
import { MonacoEditorModule, NgxMonacoEditorConfig } from '@diasoft/ngx-monaco-editor';
import { AppComponent } from './app.component';
 
export function onMonacoLoad() {
 
  console.log((window as any).monaco);
 
  const uri = monaco.Uri.parse('a://b/foo.json');
  monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
    validate: true,
    schemas: [{
      uri: 'http://myserver/foo-schema.json',
      fileMatch: [uri.toString()],
      schema: {
        type: 'object',
        properties: {
          p1: {
            enum: ['v1', 'v2']
          },
          p2: {
            $ref: 'http://myserver/bar-schema.json'
          }
        }
      }
    }, {
      uri: 'http://myserver/bar-schema.json',
      fileMatch: [uri.toString()],
      schema: {
        type: 'object',
        properties: {
          q1: {
            enum: ['x1', 'x2']
          }
        }
      }
    }]
  });
}
 
const monacoConfig: NgxMonacoEditorConfig = {
  baseUrl: 'assets',
  defaultOptions: { scrollBeyondLastLine: false },
  onMonacoLoad
};
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    MonacoEditorModule.forRoot(monacoConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Теперь передайте конфигурацию модели типаNgxEditorModelкомпоненту редактора:

@Component({
  selector: 'app-root',
  template: `<ngx-monaco-editor [options]="options" [model]="model"></ngx-monaco-editor>`,
  styles: []
})
export class AppComponent {
  options = {
    theme: 'vs-dark'
  };
 
  jsonCode = [
    '{',
    '    "p1": "v3",',
    '    "p2": false',
    '}'
  ].join('\n');
 
  model: NgxEditorModel = {
    value: this.jsonCode,
    language: 'json',
    uri: monaco.Uri.parse('a://b/foo.json')
  };
}

QAuthModule Form Flow