ng-util
@ng-util/monaco-editor
Monaco Code Editor for Angular.
Inspired by ngx-monaco-editor.
Demo
Usage
Installation
Install from npm repository:
npm install @ng-util/monaco-editor --saveConfigure monaco-editor library
Currently this library only supports load monaco-editor with AMD mode. The default is to use cdn (https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min) lazy loading。
If you are using local monaco editor library, you could add the following:
"assets": [
{
"glob": "**/*",
"input": "node_modules/monaco-editor/min/vs",
"output": "/lib/vs"
}
],And configure baseUrl via NuMonacoEditorModule.forRoot.
NuMonacoEditorModule.forRoot({
baseUrl: `lib`,
}),Sample
Include NuMonacoEditorModule in Main Module and Feature Modules where you want to use the editor component.(eg: app.module.ts):
import { NgModule } from '@angular/core';
import { NuMonacoEditorModule } from '@ng-util/monaco-editor';
@NgModule({
imports: [
NuMonacoEditorModule // And use `provideNuMonacoEditorConfig` to modify the global configuration
],
})
export class AppModule { }Create Editor options in component.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `<nu-monaco-editor [(ngModel)]="value" [options]="editorOptions"></nu-monaco-editor>`,
})
export class DemoComponent {
value: string = 'const a = 1;';
editorOptions = { theme: 'vs-dark', language: 'typescript' };
}Or monaco diff editor:
import { Component } from '@angular/core';
import { NuMonacoEditorDiffModel } from '@ng-util/monaco-editor';
@Component({
selector: 'app-root',
template: `<nu-monaco-diff-editor [options]="editorOptions" [old]="old" [new]="new"></nu-monaco-diff-editor>`,
})
export class DemoComponent {
editorOptions = { theme: 'vs-dark', language: 'javascript' };
old: NuMonacoEditorDiffModel = { code: `<p>1</p>` };
new: NuMonacoEditorDiffModel = { code: `<p>2</p>` };
}Events
Output event can be divided into different stages of feedback according to the type attribute. When you need to initializeinit, you can program the editor in one step.
import { Component } from '@angular/core';
import { NuMonacoEditorEvent } from '@ng-util/monaco-editor';
@Component({
selector: 'app-root',
template: `<nu-monaco-editor [(ngModel)]="value" [options]="editorOptions" (event)="showEvent($event)"></nu-monaco-editor>`,
})
export class DemoComponent {
value: string = 'const a = 1;';
editorOptions = { theme: 'vs-dark', language: 'javascript' };
showEvent(e: NuMonacoEditorEvent): void {
if (e.type === 'init') {
// doing
}
}
}Configurations
forRoot() method of NuMonacoEditorModule accepts config of type NuMonacoEditorConfig.
NuMonacoEditorModule.forRoot({
baseUrl: ``, // The base URL to monaco editor library assets via AMD (RequireJS), Default: `https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min`
defaultOptions: {}, // Default options when creating editors
monacoLoad: (m) => {} // The event after the first loading of the monaco editor library is completed, use this function to extend monaco editor functionalities.
}),Configure JSON Defaults
monacoLoad property of NuMonacoEditorConfig can be used to configure JSON default.
NuMonacoEditorModule.forRoot({
defaultOptions: { scrollBeyondLastLine: false },
monacoLoad: () => {
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'],
},
},
},
},
],
});
},
}),Now pass model config of type NuMonacoEditorModule to Editor Component.
import { Component } from '@angular/core';
import { NuMonacoEditorEvent, NuMonacoEditorModel } from '@ng-util/monaco-editor';
@Component({
selector: 'app-demo',
template: `
<nu-monaco-editor #a [(ngModel)]="value" [model]="model" (event)="showEvent($event)"></nu-monaco-editor>
<button (click)="a.editor.getAction('editor.action.formatDocument').run()">Format document</button>
`,
})
export class DemoComponent {
value = '{"p1":"a"}';
model: NuMonacoEditorModel;
showEvent(e: NuMonacoEditorEvent) {
if (e.type === 'init') {
this.model = {
language: 'json',
uri: monaco.Uri.parse('a://b/foo.json'),
};
}
}
}API
nu-monaco-editor
| Property | Description | Type | Default |
|---|---|---|---|
[placeholder] |
Placeholder of monaco editor, Can change the style via defining the .monaco-editor-placeholder CSS. |
string |
- |
[height] |
Height of monaco editor | string |
200px |
[disabled] |
Disabled of monaco editor | boolean |
false |
[autoFormat] |
Whether to automatically format the document | boolean |
true |
[options] |
Default options when creating editors | monaco.editor.IStandaloneEditorConstructionOptions |
- |
[model] |
Model of monaco editor | NuMonacoEditorModel |
- |
[delay] |
Delay init monaco editor, unit: ms | number |
0 |
(event) |
Event callback | EventEmitter<NuMonacoEditorEvent> |
- |
nu-monaco-diff-editor
| Property | Description | Type | Default |
|---|---|---|---|
[height] |
Height of monaco editor | string |
200px |
[disabled] |
Disabled of monaco editor | boolean |
false |
[options] |
Default options when creating editors | monaco.editor.IStandaloneEditorConstructionOptions |
- |
[old] |
Old model of monaco editor | NuMonacoEditorDiffModel |
- |
[new] |
New model of monaco editor | NuMonacoEditorDiffModel |
- |
[delay] |
Delay init monaco editor, unit: ms | number |
0 |
(event) |
Event callback | EventEmitter<NuMonacoEditorEvent> |
- |
License
The MIT License (see the LICENSE file for the full text)