Angular TinyMCE abre el diálogo de Angular Material.

Answer

1. 

   davy.ai

   July 29, 2023 at 5:18 am

   Solución para abrir un diálogo de Angular Material al hacer clic en un botón en el editor TinyMCE

   1. Primero, importa los módulos requeridos en tu archivo .module.ts.

   import { MatDialogModule } from '@angular/material/dialog';
   import { MatButtonModule } from '@angular/material/button';
   

   1. Crea un nuevo componente que contendrá el Angular Material Dialog con la funcionalidad requerida.

   import { Component, Inject } from '@angular/core';
   import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
   
   @Component({
     selector: 'app-dialog',
     template: `
       <h2 mat-dialog-title="">Nuevo Diálogo</h2>
       <mat-dialog-content>
         Este es un ejemplo de Angular Material Dialog
       </mat-dialog-content>
       <mat-dialog-actions>
         <button mat-button="" (click)="onClose()">Cerrar</button>
       </mat-dialog-actions>
     `,
   })
   export class DialogComponent {
     constructor(
       public dialogRef: MatDialogRef<dialogcomponent>,
       @Inject(MAT_DIALOG_DATA) public data: any
     ) {}
   
     onClose(): void {
       this.dialogRef.close();
     }
   }
   

   1. Agrega los módulos MatDialogModule y MatButtonModule a tu arreglo imports y también agrega el DialogComponent creado a entryComponents en tu archivo .module.ts.

   @NgModule({
     declarations: [AppComponent, DialogComponent],
     imports: [BrowserModule, FormsModule, ReactiveFormsModule, MatDialogModule, MatButtonModule],
     providers: [],
     entryComponents: [DialogComponent],
     bootstrap: [AppComponent],
   })
   export class AppModule {}
   

   1. Agrega un nuevo botón a tu editor tinyMCE, en el cual, al hacer clic, quieres abrir el Angular Material Dialog. En la función init() de tinyMCE, utiliza parentWindow.angular para obtener el contexto de Angular y luego utiliza el servicio MatDialog para abrir el DialogComponent.

   init() {
     const customButton = {
       text: 'Nuevo Diálogo',
       icon: false,
       onclick: () => {
         // Obtener contexto de Angular
         const { angular } = parent.window;
         const { MatDialog } = angular.material;
   
         // Abrir Material Dialog
         const dialogRef = MatDialog.open(DialogComponent, {
           width: '250px',
         });
   
         // Manejar evento de cierre del diálogo
         dialogRef.afterClosed().subscribe((result) => {
           console.log('El diálogo se cerró');
         });
       },
     };
   
     tinymce.init({
       selector: '#editor',
       plugins: 'print preview paste  searchreplace ',
       toolbar: 'customButton',
       toolbar_mode: 'floating',
       tinycomments_mode: 'embedded',
       tinycomments_author: 'Nombre del autor',
       setup: function (editor) {
         editor.ui.registry.addButton('customButton', customButton);
       },
     });
   }
   

   1. Ahora puedes hacer clic en el botón recién agregado en el editor tinyMCE para abrir el Angular Material Dialog.

   Nota: Asegúrate de haber agregado MatDialog y MatButtonModule al arreglo providers en el AppComponent.

Comments are closed.