Nonlinear Programming Methods

    ng-monaco-editor
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.3 • Public • Published

    Angular wrapper for monaco-editor

    GitHub Release Workflow Status GitHub Stories Workflow Status npm

    Dependencies

    Demo

    See: https://ng-monaco-editor.js.org or https://ng-monaco-editor.netlify.app

    Setup

    Add npm dependencies

    # 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:

    {
      "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({
          /**
           * 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 @Alauda

    Keywords

    none

    Install

    npm i ng-monaco-editor

    DownloadsWeekly Downloads

    341

    Version

    5.0.3

    License

    MIT

    Unpacked Size

    232 kB

    Total Files

    30

    Last publish

    Collaborators

    • ancientrs
    • tzfeng
    • zhangmq
    • edisonqtx
    • jounqin
    • frozenwings
    • chaos1ee
    • alaudafrontend
    • shuxun.yin
    • zangguodong
    • zchange
    • pengxiao