ngx-monaco-editor初用（angular2及以上）

 

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版本，目前测试正常，无报错。