I am trying to open MatDialog from tinymce custom button but that matdialog is not getting initialized until I resize the window. I am aware that it is due to the method is written inside tinymce init json object and hence causing problem but don't know what to do:
in component class, I mentioned it like this:
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);
});
});
}
});
}
};
In component:
<editor formControlName="popupText" name="popupText" apiKey="xxxx"
[init]="tinyMceConfig"></editor>
I had borken down this code further and separated setup part in ngOnInit but that made no difference.
Just to wrap the initialization of the dialog with ngZone.run and it worked perfect for me:
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 + '">');
});
});
});
}