Angular で Monaco Editor を使用する

Monaco Editor とは、Visual Studio Code ライクなエディタをブラウザで使用できるJavascriptライブラリです。

以前、このブログで紹介しました。

https://usefuledge.com/PB_00012_monaco-editor.html

この Monaco Editor を Angular で使えるコンポーネントがありましたので紹介します。

1. ngx-monaco-editor インストール
2. angular.json を編集する。
3. app.module.ts に FormsModule と MonacoEditorModule を追加する。
4. 表示したいコンポーネントの TypeScript ファイルのクラスの中に以下を記述します。
5. 表示したいコンポーネントの HTML ファイルのクラスの中に以下を記述します。
6. こんな風に表示されたら成功です。
7. 公式ドキュメントはここにあります。

1. ngx-monaco-editor インストール

NPM パッケージをインストールします。

npm install ngx-monaco-editor --save

2. angular.json を編集する。

angular.json の project - プロジェクト名 - architect - build の中、options の assets の中に以下を記述します。

"glob": "**/*", "input": "node_modules/ngx-monaco-editor/assets/monaco", "output": "./assets/monaco/"

こんな感じになると思います。

{
  ... 省略 ...
  "projects": {
    "app1": {
  ... 省略 ...
      "architect": {
        "build": {
          ... 省略 ...
          "options": {
            ... 省略 ...
            "assets": [
              ... 省略 ...
              {
                "glob": "**/*",
                "input": "node_modules/ngx-monaco-editor/assets/monaco", "output": "./assets/monaco/"
              }
            ],
  ... 省略 ...
}

3. app.module.ts に FormsModule と MonacoEditorModule を追加する。

Import を２つ先頭に記述します。

import { FormsModule } from '@angular/forms';
import { MonacoEditorModule } from 'ngx-monaco-editor';

imports の中に２つ追加します。

@NgModule({
  declarations: [
    ... 省略 ...
  ],
  imports: [
    ... 省略 ...
    FormsModule,
    MonacoEditorModule.forRoot() // use forRoot() in main app module only.
  ],
    ... 省略 ...
})

4. 表示したいコンポーネントの TypeScript ファイルのクラスの中に以下を記述します。

export class AppComponent {
    ... 省略 ...
  editorOptions = {
    theme: 'vs-dark',
    language: 'javascript',
  };
  code: string= 'function x() {\nconsole.log("Hello world!");\n}';
}

5. 表示したいコンポーネントの HTML ファイルのクラスの中に以下を記述します。

<ngx-monaco-editor [options]="editorOptions" [(ngModel)]="code"></ngx-monaco-editor>

6. こんな風に表示されたら成功です。

7. 公式ドキュメントはここにあります。

https://github.com/atularen/ngx-monaco-editor