Skip to content
Angular wrapper for monaco-editor. https://alauda.github.io/ng-monaco-editor/
TypeScript JavaScript CSS HTML
Branch: master
Clone or download
Latest commit 98b4065 Jul 4, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook-github chore: bump version Dec 13, 2018
.storybook chore: bump version Dec 13, 2018
demo
src fix: revert rebase conflict Jul 3, 2019
stories feat: upgrade deps Jul 3, 2019
tslint-rules chore: init repo Sep 19, 2018
.editorconfig chore: init repo Sep 19, 2018
.gitignore
.lintstagedrc chore: init repo Sep 19, 2018
.prettierignore feat: add demo Nov 22, 2018
.prettierrc chore: init repo Sep 19, 2018
.travis.yml chore: fix for new org ownershipt Nov 23, 2018
README.md Update README.md Nov 23, 2018
build.js
ng-package.json feat: upgrade deps Jul 3, 2019
package.json
tsconfig.json feat: upgrade deps Jul 3, 2019
tsconfig.lib.json feat: upgrade deps Jul 3, 2019
tslint.json feat: upgrade deps Jul 3, 2019
yarn.lock feat: upgrade deps Jul 3, 2019

README.md

Angular wrapper for monaco-editor

img img Greenkeeper badge

Dependencies

  • Angular 7+
  • monaco-editor: 1.5+

Demo

See: https://alauda.github.io/ng-monaco-editor/demo/

Setup

Add npm dependencies

yarn add monaco-editor ng-monaco-editor

Configure monaco-editor library assets

Currently this library only supports load monaco-editor with AMD mode. You have to make sure your Angular application could have access to the monaco-editor library assets via RequireJS.

If you are using Angular CLI to bootstrap your app, you could add the following:

"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.

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FormsModule,
    MonacoEditorModule.forRoot({
      // Angular CLI currently does not handle assets with hashes. We manage it by manually adding
      // version numbers to force library updates:
      baseUrl: 'lib',
      defaultOptions: DEFAULT_MONACO_OPTIONS,
    }),
  ],
  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 (stores/index.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 @Alauda

You can’t perform that action at this time.