ngx-monaco-editor-app v17.0.0
ngx-monaco-editor
Angular implementation of Monaco Editor. Only supports Angular 17 and above versions.
!WARNING This repository maintains a fork of the original miki995/ngx-monaco-editor-v2 and atularen/ngx-monaco-editor repos. This package has been modified to work in custom Angular projects. Also, this package is using directly ngeenx/monaco-textmate-loader package instead monaco-editor.
Edit on StackBlitz β‘οΈ
π¦ Installation
Peer Dependencies
All of the following peer dependencies must be installed in your project. If you are using PNPM to install the package, you need to add pnpm-workspace.yaml
file to the root of your project and add the following lines to it (see example file). Because these packages coming with custom assets, you need to add them to the assets in angular.json
file.
PNPM
pnpm i monaco-editor vscode-oniguruma @ngeenx/monaco-textmate-loader
NPM
npm i monaco-editor vscode-oniguruma @ngeenx/monaco-textmate-loader
Install Package
This package is contains the Angular components for the Monaco Editor. You can install it via NPM or PNPM.
PNPM
pnpm i @ngeenx/ngx-monaco-editor
NPM
npm i @ngeenx/ngx-monaco-editor
Asessts
Add the glob to assets in angular.json
{
...
"projects": {
"project-name": {
...
"architect": {
"build": {
...
"options": {
...
"assets": [
...
{
"glob": "**/*",
"input": "node_modules/monaco-editor/min",
"output": "./assets/monaco-editor/min"
},
{
"glob": "**/*",
"input": "node_modules/monaco-editor/min-maps",
"output": "./assets/monaco-editor/min-maps"
},
{
"glob": "**/*",
"input": "node_modules/@ngeenx/monaco-textmate-loader/dist/grammars",
"output": "./assets/monaco-textmate-loader/grammars"
},
{
"glob": "**/*",
"input": "node_modules/@ngeenx/monaco-textmate-loader/dist/configurations",
"output": "./assets/monaco-textmate-loader/configurations"
},
{
"glob": "**/*",
"input": "node_modules/vscode-oniguruma/release",
"output": "./assets/vscode-oniguruma/release"
}
],
...
}
}
}
}
}
Import Module
Import NgxMonacoEditorModule
in your app.module.ts
import { NgxMonacoEditorModule } from '@ngeen/ngx-monaco-editor';
...
// define ngx monaco editor configs
const monacoConfig: NgxMonacoEditorConfig = {
baseUrl: "/assets",
defaultOptions: {
scrollBeyondLastLine: false,
baseUrl: "/assets"
}
}
@NgModule({
declarations: [
AppComponent,
...
],
imports: [
BrowserModule,
FormsModule,
NgxMonacoEditorModule.forRoot(monacoConfig), // <-- import the module
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
𧩠Available Components
π EditorComponent
<ngx-monaco-editor [options]="options" [(ngModel)]="code"></ngx-monaco-editor>
π DiffEditorComponent
<ngx-monaco-diff-editor [options]="options" [(ngModel)]="code"><ngx-monaco-diff-editor>
π¨ Styling
By default, the editor component has fixed height of 200px. You can set the height of the editor by setting the height of the parent container.
<div style="height: 500px">
<ngx-monaco-editor style="height: 100%" [options]="options" [(ngModel)] ="code"></ngx-monaco-editor>
</div>
Set automaticLayout option to adjust editor size dynamically. Recommended when using in modal dialog or tabs where editor is not visible initially.
π Events
Output event (onInit) expose editor instance that can be used for performing custom operations on the editor.
<ngx-monaco-editor [options]="options" [(ngModel)]="code" (onInit)="onInit($event)"></ngx-monaco-editor>
export class AppComponent {
public options = { theme: 'vs-dark', language: 'javascript' };
publiΔc code = 'function x() { console.log("Hello world!"); }';
public onInit(editor: any): void {
let line = editor.getPosition();
console.log(line);
}
}
π Additional Resources
Monaco Editor Monaco Editor Options monaco-textmate-loader vscode-oniguruma WASM
2 months ago