ngx-monaco-editor初用(angular2及以上)

柴辰阳
2023-12-01

 

monaco-editor是一款优秀的在线编辑器,能够智能提示多种开发语言、脚本语言,还能做文本比较...

项目GitHub:https://github.com/atularen/ngx-monaco-editor

本人node等版本:

Angular CLI: 6.2.9
Node: 8.12.0
OS: win32 x64
Angular: 6.1.10


一、安装:

npm install ngx-monaco-editor@6.0.0 --save

二、配置

按照GitHub中readme提示设置项目,挂。。。

GitHub设置:
{
  "apps": [
    {
      "assets": [
        { "glob": "**/*", "input": "../node_modules/ngx-monaco-editor/assets/monaco", "output": "./assets/monaco/" }
      ],
      ...
    }
    ...
  ],
  ...
}

后改为:

"assets": [
  "src/favicon.ico",
  "src/assets",
  { "glob": "**/*", "input": "node_modules/ngx-monaco-editor/assets/monaco", "output": "./assets/monaco" }

]

即可正常使用了,使用过程GitHub有详细介绍。可做参考。

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { MonacoEditorModule } from 'ngx-monaco-editor';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    MonacoEditorModule.forRoot() // use forRoot() in main app module only.
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  editorOptions = {theme: 'vs-dark', language: 'javascript'};
  code: string= 'function x() {\nconsole.log("Hello world!");\n}';
}
<ngx-monaco-editor [options]="editorOptions" [(ngModel)]="code"></ngx-monaco-editor>

 补充说明:

踩雷了,这组件的作者不负责任啊。v6版本中,干掉了很多脚本语言,比如shell,在v6中shell文本编辑的时候,压根就不会高亮显示,太坑了,在v7中没有这个问题,angular6使用v7版本,目前测试正常,无报错。

 类似资料: