我正在使用 Angular 12 開發一個 web 組件，我正在使用 ACE 編輯器。我一步一步地遵循了教程（下面的鏈接），但最終得到了奇怪的結果。我最終將編輯器放在一個細列中 - 灰色 - 并且它沒有連接到 div。( https://blog.shhdharmen.me/how-to-setup-ace-editor-in-angular )
知道為什么會這樣嗎？
網站.html
<div
style="width: 500px;height: 250px;"
#editor></div>
組件.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());
});
}
}
uj5u.com熱心網友回復：
這是因為 shadow dom 封裝隱藏了 ace 的全域樣式
添加
aceEditor.renderer.attachToShadowRoot()
讓編輯器知道它在 shadow dom 元素中，需要為其添加額外的樣式。
另外 basepath 不應包含 ace.js
ace.config.set('basePath', "https://ace.c9.io/build/src-noconflict/");
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/335770.html