Estoy tratando de abrir MatDialog desde el botón personalizado de tinymce, pero ese matdialog no se inicializa hasta que cambio el tamaño de la ventana. Soy consciente de que se debe a que el método está escrito dentro del objeto tinymce init json y, por lo tanto, causa problemas, pero no sé qué hacer:
en la clase de componentes, lo mencioné así:
tinyMceConfig: any = { menubar: false, plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak','searchreplace wordcount visualblocks visualchars code fullscreen','insertdatetime media nonbreaking save table contextmenu directionality','emoticons template paste textcolor colorpicker textpattern'], toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | code | link Upload', setup: (editor) => { editor.ui.registry.addButton('Upload', { icon: 'browse', onAction: ()=> { const dialogRef: MatDialogRef<any> = this.dialog.open(UploadmediaComponent, { width: '95vw', disableClose: true, panelClass: 'uploadPanel'}); dialogRef.afterClosed().subscribe(res => { if (!res) { return; } res.forEach(image => { console.log(image.url); editor.insertContent(image.url); }); }); } }); } };En componente:
<editor formControlName="popupText" name="popupText" apiKey="xxxx" [init]="tinyMceConfig"></editor>Había reducido este código aún más y separado la parte de configuración en ngOnInit, pero eso no hizo ninguna diferencia.
Solo para envolver la inicialización del diálogo con ngZone.run y funcionó perfectamente para mí:
onAction: ()=> { this.ngZone.run(()=> { const dialogRef: MatDialogRef<any> = this.dialog.open(UploadmediaComponent, { width: '95vw', disableClose: true, panelClass: 'uploadPanel'}); dialogRef.afterClosed().subscribe(res => { if (!res) { return; } res.forEach(image => { editor.insertContent('<img src="' + image.url + '">'); }); }); }); }