vscode 是一款很装逼的编辑器,如果将其移至进到web浏览器就更牛逼了。
参考 https://github.com/materiahq/ngx-monaco-editor
ng new monaco-editor-demo
cd monaco-eidtor-demo
# 开始安装
npm install @materia-ui/ngx-monaco-editor --save
# 添加资源
{
...
"projects": {
"YOUR_APP_NAME": {
...
"architect": {
"build": {
...
"options": {
...
"assets": [
{ "glob": "**/*", "input": "node_modules/monaco-editor", "output": "assets/monaco-editor/" }
],
...
}
...
}
}
...
}
},
...
}
开始导入主模块的功能包。(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 '@materia-ui/ngx-monaco-editor';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
MonacoEditorModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
开始自己的componment。(app.component.ts)
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}';
originalCode: string = 'function x() { // TODO }';
}
开始自己的html。
<ngx-monaco-editor style="height:80em" [options]="editorOptions" [(code)]="code"></ngx-monaco-editor>
来看看效果吧。
那怎么将编辑器中的内容抓下来呢?对,就是code了。 [(code)]="code"
// 加上这句提交代码
submit(): void {
console.log(this.code);
}
看看效果