Instancia TinyMCE Angular 8

Answer

1. 

   davy.ai

   May 29, 2023 at 7:50 am

   Soluciones para Problemas en Tinymce Angular 8 SPA

   Removiendo la Instancia del Componente

   Para remover la instancia del componente, puedes usar el gancho de ciclo de vida ngOnDestroy para limpiar cualquier recurso utilizado por el editor TinyMCE:

   import { Component, OnDestroy } from '@angular/core';
   import tinymce from 'tinymce';
   
   @Component({
     selector: 'app-tinymce',
     template: '<textarea class="tinymce"></textarea>',
   })
   export class TinymceComponent implements OnDestroy {
     editor: any;
   
     ngAfterViewInit() {
       tinymce.init({
         selector: 'textarea.tinymce',
       }).then(editor => this.editor = editor);
     }
   
     ngOnDestroy() {
       this.editor.remove();
     }
   }
   

   Forzando a Reiniciar TinyMCE

   Para forzar a TinyMCE a reiniciar, puedes usar el método init() con un nuevo objeto de configuración:

   import { Component } from '@angular/core';
   import tinymce from 'tinymce';
   
   @Component({
     selector: 'app-tinymce',
     template: '<textarea class="tinymce"></textarea>',
   })
   export class TinymceComponent {
     editor: any;
   
     ngAfterViewInit() {
       tinymce.init({
         selector: 'textarea.tinymce',
         setup: (editor) => {
           this.editor = editor;
         }
       });
     }
   
     reInitialize() {
       tinymce.remove(this.editor);
   
       tinymce.init({
         selector: 'textarea.tinymce',
         setup: (editor) => {
           this.editor = editor;
         }
       });
     }
   }
   

   Aquí, eliminamos la instancia anterior del editor usando el método remove() y luego llamamos a init() nuevamente con un nuevo objeto de configuración. Nota que guardamos una referencia a la instancia de editor actual en la propiedad editor del componente.

Comments are closed.