以下是一个可能的解决方法示例:
import { Component } from '@angular/core';
declare const tinymce: any;
@Component({
selector: 'app-editor',
templateUrl: './editor.component.html',
styleUrls: ['./editor.component.css']
})
export class EditorComponent {
editorConfig: any;
constructor() {
this.editorConfig = {
plugins: 'code',
toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code'
};
}
onEditorInit() {
tinymce.init(this.editorConfig);
}
}
onEditorInit
方法。
import { Component, AfterViewInit } from '@angular/core';
declare const tinymce: any;
@Component({
selector: 'app-editor',
templateUrl: './editor.component.html',
styleUrls: ['./editor.component.css']
})
export class EditorComponent implements AfterViewInit {
editorConfig: any;
constructor() {
this.editorConfig = {
plugins: 'code',
toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code'
};
}
ngAfterViewInit() {
tinymce.init({
...this.editorConfig,
selector: '#myEditor',
setup: (editor: any) => {
editor.on('init', () => {
this.onEditorInit();
});
}
});
}
onEditorInit() {
console.log('Editor is initialized.');
}
}
这样,你就可以在Angular中使用TinyMCE编辑器,并确保图标正常显示。