时间戳

首页 > 解决方案 > 如何在 Angular 12 中更改 ngx-monaco-editor 的背景颜色？

angular - 如何在 Angular 12 中更改 ngx-monaco-editor 的背景颜色？

问题描述

我目前正在尝试在我的 Angular 12 项目中更改 ngx-monaco-editor 元素的背景颜色，但到目前为止我没有尝试过任何工作。有没有一种方法可以让我用我当前的设置轻松地做到这一点，或者我需要用另一种方法重做它吗？这是我目前正在尝试做的，但编辑器最终看起来像“vs”主题。我的代码片段：

组件1.html

<div class="data" id="d2">
        <ngx-monaco-editor id="xmlDisplayer" style="height: 100%;" [options]="editorOptions" [(ngModel)]="code"></ngx-monaco-editor>
</div>

组件1.ts

import { Component, OnInit } from '@angular/core';
import { DataMapService } from '../data-map.service';
import { MonacoEditorLoaderService } from '@materia-ui/ngx-monaco-editor';
import { saveAs } from "file-saver";
import * as d3 from 'd3';

export class component1 implements OnInit {

  constructor(private dataMapService: DataMapService, private monacoLoaderService: MonacoEditorLoaderService) {
    this.monacoLoaderService.isMonacoLoaded$.pipe(
    ).subscribe(() => {
      (window as any).monaco.editor.defineTheme('myCustomTheme', {
        base: 'vs-dark', // can also be vs-dark or hc-black
        colors: {
          "editor.background": '#AA4A44', // code background
          'editorCursor.foreground': '#002438', // corsour color
          'editor.lineHighlightBackground': '#9B9B9B', // line highlight colour
          'editorLineNumber.foreground': '#666666', // line number colour
          'editor.selectionBackground': '#666666', // code selection background
          'editor.inactiveSelectionBackground': '#7e890b'
        }
      });
    });
   }

  ngOnInit(): void {
  }

  //options and text for the xml display
  editorOptions = {theme: 'myCustomTheme', language: 'xml'};
  code = "xml stuff goes here";

app.module.ts

import { MonacoEditorModule } from 'ngx-monaco-editor';
//Other component imports and misc

@NgModule({
  declarations: [
    AppComponent,
    //Component declarations
  ],
  imports: []
    //Other imports
    MonacoEditorModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  
 }

我遇到的另一个问题是，当我尝试在其他地方执行“monaco.editor.defineTheme(...)”时，我的 monaco 命名空间出现错误。任何帮助将不胜感激。

标签： angulartypescriptmonaco-editor

解决方案

我能够解决这个问题，而无需过多地更改我的代码。如果您在 component1.ts 中没有 .pipe(filter(),take()) 它将不起作用，因此请确保包含它。

这个 stackblitz 帮我弄清楚了：https ://stackblitz.com/edit/materia-ngx-monaco-editor-example

组件1.html

<div class="data" id="d2">
        <ngx-monaco-editor id="xmlDisplayer" style="height: 100%;" [options]="editorOptions" [(ngModel)]="code"></ngx-monaco-editor>
</div>

组件1.ts

import { Component, OnInit } from '@angular/core';
import { filter, take } from 'rxjs/operators';
import { MonacoEditorConstructionOptions, MonacoEditorLoaderService } from '@materia-ui/ngx-monaco-editor';

export class component1 implements OnInit {

  constructor(private monacoLoaderService: MonacoEditorLoaderService) {
    this.monacoLoaderService.isMonacoLoaded$
      .pipe(
        filter((isLoaded) => !!isLoaded),
        take(1)
      )
      .subscribe(() => {
        monaco.editor.defineTheme('myCustomTheme', {
          base: 'vs-dark', // can also be vs or hc-black
          inherit: true, // can also be false to completely replace the builtin rules
          rules: [
            {
              token: 'comment',
              foreground: 'ffa500',
              fontStyle: 'italic underline'
            },
            { token: 'comment.js', foreground: '008800', fontStyle: 'bold' },
            { token: 'comment.css', foreground: '0000ff' } // will inherit fontStyle from `comment` above
          ],
          colors: {
            "editor.background": '#ff0000', // code background
            'editorCursor.foreground': '#002438', // corsour color
            'editor.lineHighlightBackground': '#9B9B9B', // line highlight colour
            'editorLineNumber.foreground': '#666666', // line number colour
            'editor.selectionBackground': '#666666', // code selection background
            'editor.inactiveSelectionBackground': '#7e890b'
          }
        });
      });
   }

  ngOnInit(): void {
  }


  //options and text for the xml display
  editorOptions: MonacoEditorConstructionOptions = {
    theme: 'myCustomTheme',
    language: 'xml',
  };
  code = "xml goes here";
}

app.module.ts

import { NgModule } from '@angular/core';
import { MonacoEditorModule, MONACO_PATH } from '@materia-ui/ngx-monaco-editor';
//Other import functions

@NgModule({
  declarations: [
    AppComponent,
    //Other component declarations
  ],
  imports: [
    MonacoEditorModule,
    //Other imports
  ],
  providers: [
    {
      provide: MONACO_PATH,
      useValue: 'https://unpkg.com/monaco-editor@0.24.0/min/vs'
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  
 }

我希望这可以帮助任何遇到此问题的人

推荐阅读