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>
コメント