在点击按钮时将角度组件动态插入到TinyMCE编辑器,可以通过以下步骤实现:
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import tinymce from 'tinymce/tinymce';
@Component({
selector: 'app-editor',
templateUrl: './editor.component.html',
styleUrls: ['./editor.component.css']
})
export class EditorComponent implements AfterViewInit {
@ViewChild('tinymceEditor') tinymceEditor: any;
ngAfterViewInit() {
tinymce.init({
target: this.tinymceEditor.nativeElement,
// 其他TinyMCE配置项...
});
}
}
<button (click)="insertComponent()">插入角度组件</button>
insertComponent() {
const componentHtml = '<app-angle-component></app-angle-component>'; // 角度组件的HTML代码
tinymce.activeEditor.execCommand('mceInsertContent', false, componentHtml);
}
<app-editor></app-editor>
这样,当点击按钮时,角度组件就会被动态插入到TinyMCE编辑器中。
请注意,以上代码示例中的角度组件和TinyMCE编辑器的配置可能需要根据实际情况进行调整。此外,还可以根据具体需求对插入的角度组件进行样式和交互的定制。