如何在 Angular 中使用 Ace-Editor？

Question

我正在使用 Angular 12 开发 Web 组件，并且我正在使用 ACE 编辑器。我按照教程（下面的 link）一步步进行，但结果很奇怪。我最终将编辑器放在一个细长的列中 - 灰色 - 并且它没有连接到 div。 (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

这是因为 shadow dom 封装对 ace 隐藏了全局样式

添加

 aceEditor.renderer.attachToShadowRoot()

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

此外，basepath 不应包含 ace.js

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

如何在 Angular 中使用 Ace-Editor？

How can I use Ace-Editor in Angular?

web-component

ace-editor

angular