A monaco editor loader and renderer for Angular.
- Load resources of monaco editor from static file server or CDN.
- Render a monaco editor in a declarative way.
- Support both IEditor and IDiffEditor.
- Provide hooks like onInit for you config themes, langauges etc..
- Support default editor options.
- Fully controlled mode.
- Update editor option of all editor instances from a service.
- Auto respond to resize events.
Install with npm:
npm install @silicic/monaco-ng
You should install monaco-editor in your project.
npm install monaco-editor --save-dev
monaco-ng loads resources of monaco-editor asynchronously, so you should store store them somewhere. For example, you can put them with other static files. Add these lines in angular.json
{
"assets": [
"src/favicon.ico",
"src/assets",
+ {
+ "glob": "**/*",
+ "input": "./node_modules/monaco-editor/min/vs",
+ "output": "/assets/vs/"
+ }
],
}
All you could provide
assetsRoot
to load monaco editor from CDN. See below.
You can choose to provide configurations with the injection MONACO_CONFIG
in the root.
For example,
@NgModule({
declarations: [AppComponent],
imports: [],
providers: [
{
provide: MONACO_CONFIG,
useValue: {
defaultEditorOption: {
language: 'typescript',
fontSize: 14
},
onLoad() {
// Register langauges, themes etc.
}
}
}
],
bootstrap: [AppComponent]
})
export class AppModule {}
Not only could you provide default editor options, but also use hooks to do extra works.
It's every easy to render an editor. You just have to declare one in the template:
<si-monaco-editor
[ngModel]="code"
[editorOption]="editorOption"
></si-monaco-editor>
You can also get the monaco editor instance from the output editorInitialized
. If you don't want monaco-ng to deal with text models for you, you can set fullControl
to true
, get the monaco editor instance, and then play with it.
@Component({
selector: 'your-editor-component',
template: `
<si-monaco-editor
[fullControl]="true"
(editorInitialized)="withEditor($event)"
></si-monaco-editor>
`
})
export class YourEditorComponent {
editor; // monaco editor instance
withEditor(editor) {
this.editor = editor;
}
}
Property | Description | Type | Default Value |
---|---|---|---|
[mode] |
Create a normal editor or a diff editor. | normal | diff |
normal |
[originalText] |
Only valid when mode is set to diff . |
normal | diff |
normal |
[fullControl] |
Enable full-control mode. | boolean |
false |
[editorOption] |
Editor options. | IEditorConstructionOptions | IDiffEditorConstructionOptions |
{} |
(editorInitialized) |
Emit an editor when it's ready | Subject<IEditor | IDiffEditor> |
false |
Property | Description | Type | Default Value |
---|---|---|---|
updateDefaultOption |
Update default editor options. You can use force to make the change applied to every existing editor. |
(option: JoinedEditorOption, force = false): void |
- |
Configurations of MonacoService
. It should be provided in the root.
Its type should be MonacoConfig
.
Property | Description | Type | Default Value |
---|---|---|---|
assetsRoot |
It tells monaco-ng where to load resources of monaco editor. | string |
- |
defaultEditorOption |
Default options of monaco editor. | Object |
{} |
onLoad |
A hook that get invoked when resources of monaco editor get loaded. | Function |
- |
onFirstEditorInit |
A hook that get invoked when the first monaco editor is created. | Function |
- |
onInit |
A hook that get invoked when a monaco editor is created. | Function |
- |
MIT