如何在Angular中使用Ace-Editor？

Question

我正在使用Angular 12和ACE编辑器开发一个web组件。我一步一步地遵循了教程(下面的链接)，但最终得到了奇怪的结果。我最终将编辑器放在了一个灰色的细列中--而且它并没有连接到-in。(https://blog.shhdharmen.me/how-to-setup-ace-editor-in-angular)

你知道为什么会发生这种事吗？

seite.html

<div class="app-ace-editor"
     style="width: 500px;height: 250px;"
     #editor></div>

component.ts

import { Component, ElementRef, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import * as ace from "ace-builds";

@Component({
  selector: 'app-studentfe',
  templateUrl: './studentfe.component.html',
  styleUrls: ['./studentfe.component.css'],
  encapsulation : ViewEncapsulation.ShadowDom
})

export class StudentfeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  @ViewChild('editor') private editor: ElementRef<HTMLElement>;

  ngAfterViewInit(): void {
     ace.config.set("fontSize", "14px");
     ace.config.set(
        'basePath',
        "https://ace.c9.io/build/src-noconflict/ace.js"
     );

     const aceEditor = ace.edit(this.editor.nativeElement);
     aceEditor.setTheme("ace/theme/monokai");
     aceEditor.session.setMode("ace/mode/html");
     aceEditor.on("change", () => {
        console.log(aceEditor.getValue());
     });
  }
}

Answer 1

这是由于隐藏了全局样式而不让ace看到的。

添加

 aceEditor.renderer.attachToShadowRoot()

为了让编辑器知道它在卷影dom元素中，需要给它添加额外的样式。

此外，basepath不应包含ace.js

ace.config.set('basePath', "https://ace.c9.io/build/src-noconflict/");