https://github.com/alauda/ng-monaco-editor
Angular wrapper for monaco-editor.
https://github.com/alauda/ng-monaco-editor
angular monaco-editor ng
Last synced: 12 months ago
JSON representation
Angular wrapper for monaco-editor.
- Host: GitHub
- URL: https://github.com/alauda/ng-monaco-editor
- Owner: alauda
- License: mit
- Created: 2018-09-19T08:15:35.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-10-09T07:07:15.000Z (over 1 year ago)
- Last Synced: 2025-04-09T15:03:16.528Z (12 months ago)
- Topics: angular, monaco-editor, ng
- Language: TypeScript
- Homepage: https://ng-monaco-editor.netlify.app
- Size: 22.6 MB
- Stars: 29
- Watchers: 15
- Forks: 5
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular wrapper for monaco-editor
[](https://github.com/alauda/ng-monaco-editor/actions/workflows/release.yml)
[](https://github.com/alauda/ng-monaco-editor/actions/workflows/stories.yml)
[](https://www.npmjs.com/package/ng-monaco-editor)
## Dependencies
- [`Angular`](https://github.com/angular/angular) 10+
- [`monaco-editor`](https://github.com/Microsoft/monaco-editor): 0.15+
## Demo
See: or
## Setup
### Add npm dependencies
```sh
# npm
npm i monaco-editor ng-monaco-editor
# yarn
yarn add monaco-editor ng-monaco-editor
```
### Configure monaco-editor library assets
It's supported to load monaco-editor with AMD or ESM mode.
If you'd like to use AMD mode, you have to make sure your Angular application could have access to the `monaco-editor` library
assets via AMD. If you are using Angular CLI to bootstrap your app, you could add the following:
```jsonc
{
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "node_modules/monaco-editor/min/vs",
"output": "/lib/vs"
}
]
}
```
### Load ng-monaco-editor module
Most of the time, you should configure the module at the root module.
```ts
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
FormsModule,
MonacoEditorModule.forRoot({
/**
* optional, load monaco by yourself, you'd prefer loading esm for example
*/
dynamicImport: () => import('monaco-editor'),
/**
* optional, use amd loader to load monaco if present, lower priority than `dynamicImport`
*
* Angular CLI currently does not handle assets with hashes. We manage it by manually adding
* version numbers to force library updates:
*/
baseUrl: 'lib/v1',
defaultOptions: {},
}),
],
providers: [
{
// Optional:
// You could also override the default MonacoEditor provider.
// If you plan to do so, I recommend you to read through the source code.
provide: MonacoProviderService,
useClass: CustomMonacoProviderService,
},
],
bootstrap: [AppComponent],
})
export class AppModule {}
```
### Usage example
Please refer to the storybook (`stories/**/*.stories.ts`).
This module provide three usages:
1. `ng-monaco-editor` component
2. `ng-monaco-diff-editor` component
3. `ngCodeColorize` directive
Note, if the height of ng-monaco-editor/ng-monaco-diff-editor is too small, you
may have to resize it yourself. This is a limitation and by design
that how monaco-editor works.
## License
[MIT](./LICENSE) @[Alauda](https://github.com/alauda)