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')
};
}