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 [email protected] --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>