Angular で Monaco Editor を使用する

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

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

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

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

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 を2つ先頭に記述します。


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

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


@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

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です